fix: handle 404 race condition in Stripe webhook reconciliation (backport #7584) (#7603)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/instrumentation.ts

@@ -1,7 +1,19 @@
 import * as Sentry from "@sentry/nextjs";
+import { type Instrumentation } from "next";
+import { isExpectedError } from "@formbricks/types/errors";
 import { IS_PRODUCTION, PROMETHEUS_ENABLED, SENTRY_DSN } from "@/lib/constants";
 
-export const onRequestError = Sentry.captureRequestError;
+export const onRequestError: Instrumentation.onRequestError = (...args) => {
+  const [error] = args;
+
+  // Skip expected business-logic errors (AuthorizationError, ResourceNotFoundError, etc.)
+  // These are handled gracefully in the UI and don't need server-side Sentry reporting
+  if (error instanceof Error && isExpectedError(error)) {
+    return;
+  }
+
+  Sentry.captureRequestError(...args);
+};
 
 export const register = async () => {
   if (process.env.NEXT_RUNTIME === "nodejs") {

apps/web/modules/ee/billing/actions.test.ts

@@ -106,10 +106,7 @@ describe("billing actions", () => {
     });
     expect(mocks.getOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.ensureStripeCustomerForOrganization).toHaveBeenCalledWith("org_1");
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith(
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
-      "org_1",
-      "start-hobby"
-    );
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });
@@ -128,10 +125,7 @@ describe("billing actions", () => {
     } as any);
 
     expect(mocks.ensureStripeCustomerForOrganization).not.toHaveBeenCalled();
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith(
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
-      "org_1",
-      "start-hobby"
-    );
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });
@@ -145,7 +139,7 @@ describe("billing actions", () => {
     expect(mocks.getOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.ensureStripeCustomerForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.createProTrialSubscription).toHaveBeenCalledWith("org_1", "cus_1");
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1", "pro-trial");
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });
@@ -165,7 +159,7 @@ describe("billing actions", () => {
 
     expect(mocks.ensureStripeCustomerForOrganization).not.toHaveBeenCalled();
     expect(mocks.createProTrialSubscription).toHaveBeenCalledWith("org_1", "cus_existing");
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1", "pro-trial");
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });

apps/web/modules/ee/billing/actions.ts

@@ -216,7 +216,7 @@ export const startHobbyAction = authenticatedActionClient
       throw new ResourceNotFoundError("OrganizationBilling", parsedInput.organizationId);
     }
 
-    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId, "start-hobby");
+    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId);
     await syncOrganizationBillingFromStripe(parsedInput.organizationId);
     return { success: true };
   });
@@ -248,7 +248,7 @@ export const startProTrialAction = authenticatedActionClient
     }
 
     await createProTrialSubscription(parsedInput.organizationId, customerId);
-    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId, "pro-trial");
+    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId);
     await syncOrganizationBillingFromStripe(parsedInput.organizationId);
     return { success: true };
   });

apps/web/modules/ee/billing/api/lib/stripe-webhook.ts

@@ -150,7 +150,7 @@ export const webhookHandler = async (requestBody: string, stripeSignature: strin
       await handleSetupCheckoutCompleted(event.data.object, stripe);
     }
 
-    await reconcileCloudStripeSubscriptionsForOrganization(organizationId, event.id);
+    await reconcileCloudStripeSubscriptionsForOrganization(organizationId);
     await syncOrganizationBillingFromStripe(organizationId, {
       id: event.id,
       created: event.created,

apps/web/modules/ee/billing/lib/organization-billing.test.ts

@@ -1905,7 +1905,7 @@ describe("organization-billing", () => {
         items: [{ price: "price_hobby_monthly", quantity: 1 }],
         metadata: { organizationId: "org_1" },
       },
-      { idempotencyKey: "ensure-hobby-subscription-org_1-bootstrap" }
+      { idempotencyKey: "ensure-hobby-subscription-org_1-0" }
     );
     expect(mocks.prismaOrganizationBillingUpdate).toHaveBeenCalledWith({
       where: { organizationId: "org_1" },
@@ -1974,7 +1974,7 @@ describe("organization-billing", () => {
       ],
     });
 
-    await reconcileCloudStripeSubscriptionsForOrganization("org_1", "evt_123");
+    await reconcileCloudStripeSubscriptionsForOrganization("org_1");
 
     expect(mocks.subscriptionsCancel).toHaveBeenCalledWith("sub_hobby", { prorate: false });
     expect(mocks.subscriptionsCreate).not.toHaveBeenCalled();

apps/web/modules/ee/billing/lib/organization-billing.ts

@@ -458,18 +458,21 @@ const resolvePendingChangeEffectiveAt = (
 const ensureHobbySubscription = async (
   organizationId: string,
   customerId: string,
-  idempotencySuffix: string
+  subscriptionCount: number
 ): Promise<void> => {
   if (!stripeClient) return;
   const hobbyItems = await getCatalogItemsForPlan("hobby", "monthly");
 
+  // Include subscriptionCount so the key is stable across concurrent calls (same
+  // count → same key → Stripe deduplicates) but changes after a cancellation
+  // (count increases → new key → allows legitimate re-creation).
   await stripeClient.subscriptions.create(
     {
       customer: customerId,
       items: hobbyItems,
       metadata: { organizationId },
     },
-    { idempotencyKey: `ensure-hobby-subscription-${organizationId}-${idempotencySuffix}` }
+    { idempotencyKey: `ensure-hobby-subscription-${organizationId}-${subscriptionCount}` }
   );
 };
 
@@ -1264,8 +1267,7 @@ export const findOrganizationIdByStripeCustomerId = async (customerId: string):
 };
 
 export const reconcileCloudStripeSubscriptionsForOrganization = async (
-  organizationId: string,
+  organizationId: string
-  idempotencySuffix = "reconcile"
 ): Promise<void> => {
   const client = stripeClient;
   if (!IS_FORMBRICKS_CLOUD || !client) return;
@@ -1313,11 +1315,26 @@ export const reconcileCloudStripeSubscriptionsForOrganization = async (
     );
 
     await Promise.all(
-      hobbySubscriptions.map(({ subscription }) =>
+      hobbySubscriptions.map(async ({ subscription }) => {
-        client.subscriptions.cancel(subscription.id, {
+        try {
-          prorate: false,
+          await client.subscriptions.cancel(subscription.id, {
-        })
+            prorate: false,
-      )
+          });
+        } catch (err) {
+          if (
+            err instanceof Stripe.errors.StripeInvalidRequestError &&
+            err.statusCode === 404 &&
+            err.code === "resource_missing"
+          ) {
+            logger.warn(
+              { subscriptionId: subscription.id, organizationId },
+              "Subscription already deleted, skipping cancel"
+            );
+            return;
+          }
+          throw err;
+        }
+      })
     );
     return;
   }
@@ -1327,12 +1344,14 @@ export const reconcileCloudStripeSubscriptionsForOrganization = async (
     // (e.g. webhook + bootstrap) both seeing 0 and creating duplicate hobbies.
     const freshSubscriptions = await client.subscriptions.list({
       customer: customerId,
-      status: "active",
+      status: "all",
-      limit: 1,
+      limit: 20,
     });
 
-    if (freshSubscriptions.data.length === 0) {
+    const freshActive = freshSubscriptions.data.filter((sub) => ACTIVE_SUBSCRIPTION_STATUSES.has(sub.status));
-      await ensureHobbySubscription(organizationId, customerId, idempotencySuffix);
+
+    if (freshActive.length === 0) {
+      await ensureHobbySubscription(organizationId, customerId, freshSubscriptions.data.length);
     }
   }
 };
@@ -1340,6 +1359,6 @@ export const reconcileCloudStripeSubscriptionsForOrganization = async (
 export const ensureCloudStripeSetupForOrganization = async (organizationId: string): Promise<void> => {
   if (!IS_FORMBRICKS_CLOUD || !stripeClient) return;
   await ensureStripeCustomerForOrganization(organizationId);
-  await reconcileCloudStripeSubscriptionsForOrganization(organizationId, "bootstrap");
+  await reconcileCloudStripeSubscriptionsForOrganization(organizationId);
   await syncOrganizationBillingFromStripe(organizationId);
 };

apps/web/modules/ee/contacts/segments/components/edit-segment-modal.tsx

@@ -4,7 +4,7 @@ import { UsersIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
-import { TSegment, TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TSegment, TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { SegmentSettings } from "@/modules/ee/contacts/segments/components/segment-settings";
 import {
   Dialog,
@@ -15,23 +15,63 @@ import {
   DialogTitle,
 } from "@/modules/ui/components/dialog";
 import { SegmentActivityTab } from "./segment-activity-tab";
+import { TSegmentActivitySummary } from "./segment-activity-utils";
 
 interface EditSegmentModalProps {
   environmentId: string;
   open: boolean;
   setOpen: (open: boolean) => void;
-  currentSegment: TSegmentWithSurveyNames;
+  currentSegment: TSegmentWithSurveyRefs;
+  activitySummary: TSegmentActivitySummary;
   segments: TSegment[];
   contactAttributeKeys: TContactAttributeKey[];
   isContactsEnabled: boolean;
   isReadOnly: boolean;
 }
 
+const SegmentSettingsTab = ({
+  activitySummary,
+  contactAttributeKeys,
+  currentSegment,
+  environmentId,
+  isContactsEnabled,
+  isReadOnly,
+  segments,
+  setOpen,
+}: Pick<
+  EditSegmentModalProps,
+  | "activitySummary"
+  | "contactAttributeKeys"
+  | "currentSegment"
+  | "environmentId"
+  | "isContactsEnabled"
+  | "isReadOnly"
+  | "segments"
+  | "setOpen"
+>) => {
+  if (!isContactsEnabled) {
+    return null;
+  }
+
+  return (
+    <SegmentSettings
+      activitySummary={activitySummary}
+      contactAttributeKeys={contactAttributeKeys}
+      environmentId={environmentId}
+      initialSegment={currentSegment}
+      segments={segments}
+      setOpen={setOpen}
+      isReadOnly={isReadOnly}
+    />
+  );
+};
+
 export const EditSegmentModal = ({
   environmentId,
   open,
   setOpen,
   currentSegment,
+  activitySummary,
   contactAttributeKeys,
   segments,
   isContactsEnabled,
@@ -40,31 +80,25 @@ export const EditSegmentModal = ({
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState(0);
 
-  const SettingsTab = () => {
-    if (isContactsEnabled) {
-      return (
-        <SegmentSettings
-          contactAttributeKeys={contactAttributeKeys}
-          environmentId={environmentId}
-          initialSegment={currentSegment}
-          segments={segments}
-          setOpen={setOpen}
-          isReadOnly={isReadOnly}
-        />
-      );
-    }
-
-    return null;
-  };
-
   const tabs = [
     {
       title: t("common.activity"),
-      children: <SegmentActivityTab currentSegment={currentSegment} />,
+      children: <SegmentActivityTab currentSegment={currentSegment} activitySummary={activitySummary} />,
     },
     {
       title: t("common.settings"),
-      children: <SettingsTab />,
+      children: (
+        <SegmentSettingsTab
+          activitySummary={activitySummary}
+          contactAttributeKeys={contactAttributeKeys}
+          currentSegment={currentSegment}
+          environmentId={environmentId}
+          isContactsEnabled={isContactsEnabled}
+          isReadOnly={isReadOnly}
+          segments={segments}
+          setOpen={setOpen}
+        />
+      ),
     },
   ];
 

apps/web/modules/ee/contacts/segments/components/segment-activity-tab.tsx

@@ -1,19 +1,20 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
-import { TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { convertDateTimeStringShort } from "@/lib/time";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { Label } from "@/modules/ui/components/label";
+import { TSegmentActivitySummary } from "./segment-activity-utils";
 
 interface SegmentActivityTabProps {
-  currentSegment: TSegmentWithSurveyNames;
+  currentSegment: TSegmentWithSurveyRefs;
+  activitySummary: TSegmentActivitySummary;
 }
 
-export const SegmentActivityTab = ({ currentSegment }: SegmentActivityTabProps) => {
+export const SegmentActivityTab = ({ currentSegment, activitySummary }: SegmentActivityTabProps) => {
   const { t } = useTranslation();
-
+  const { activeSurveys, inactiveSurveys } = activitySummary;
-  const { activeSurveys, inactiveSurveys } = currentSegment;
 
   return (
     <div className="grid grid-cols-3 pb-2">
@@ -22,20 +23,20 @@ export const SegmentActivityTab = ({ currentSegment }: SegmentActivityTabProps)
           <Label className="text-slate-500">{t("common.active_surveys")}</Label>
           {!activeSurveys?.length && <p className="text-sm text-slate-900">-</p>}
 
-          {activeSurveys?.map((survey, index) => (
+          {activeSurveys?.map((surveyName) => (
-            <p className="text-sm text-slate-900" key={index + survey}>
+            <div className="py-0.5" key={surveyName}>
-              {survey}
+              <p className="text-sm text-slate-900">{surveyName}</p>
-            </p>
+            </div>
           ))}
         </div>
         <div>
           <Label className="text-slate-500">{t("common.inactive_surveys")}</Label>
           {!inactiveSurveys?.length && <p className="text-sm text-slate-900">-</p>}
 
-          {inactiveSurveys?.map((survey, index) => (
+          {inactiveSurveys?.map((surveyName) => (
-            <p className="text-sm text-slate-900" key={index + survey}>
+            <div className="py-0.5" key={surveyName}>
-              {survey}
+              <p className="text-sm text-slate-900">{surveyName}</p>
-            </p>
+            </div>
           ))}
         </div>
       </div>

apps/web/modules/ee/contacts/segments/components/segment-activity-utils.ts

@@ -0,0 +1,99 @@
+import { TBaseFilters, TSegmentWithSurveyRefs } from "@formbricks/types/segment";
+import { TSurvey } from "@formbricks/types/surveys/types";
+
+type TSurveySummary = Pick<TSurvey, "id" | "name" | "status">;
+type TReferencingSegmentSurveyGroup = {
+  segmentId: string;
+  segmentTitle: string;
+  surveys: TSurveySummary[];
+};
+
+export type TSegmentActivitySummary = {
+  activeSurveys: string[];
+  inactiveSurveys: string[];
+};
+
+export const doesSegmentReferenceSegment = (filters: TBaseFilters, targetSegmentId: string): boolean => {
+  for (const filter of filters) {
+    const { resource } = filter;
+
+    if (Array.isArray(resource)) {
+      if (doesSegmentReferenceSegment(resource, targetSegmentId)) {
+        return true;
+      }
+      continue;
+    }
+
+    if (resource.root.type === "segment" && resource.root.segmentId === targetSegmentId) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const getReferencingSegments = (
+  segments: TSegmentWithSurveyRefs[],
+  targetSegmentId: string
+): TSegmentWithSurveyRefs[] =>
+  segments.filter(
+    (segment) =>
+      segment.id !== targetSegmentId && doesSegmentReferenceSegment(segment.filters, targetSegmentId)
+  );
+
+export const buildSegmentActivitySummary = (
+  directSurveys: TSurveySummary[],
+  indirectSurveyGroups: TReferencingSegmentSurveyGroup[]
+): TSegmentActivitySummary => {
+  const surveyMap = new Map<string, TSurveySummary>();
+
+  for (const survey of directSurveys) {
+    surveyMap.set(survey.id, survey);
+  }
+
+  for (const segment of indirectSurveyGroups) {
+    for (const survey of segment.surveys) {
+      if (!surveyMap.has(survey.id)) {
+        surveyMap.set(survey.id, survey);
+      }
+    }
+  }
+
+  const surveys = Array.from(surveyMap.values());
+
+  return {
+    activeSurveys: surveys.filter((survey) => survey.status === "inProgress").map((survey) => survey.name),
+    inactiveSurveys: surveys
+      .filter((survey) => survey.status === "draft" || survey.status === "paused")
+      .map((survey) => survey.name),
+  };
+};
+
+export const buildSegmentActivitySummaryFromSegments = (
+  currentSegment: TSegmentWithSurveyRefs,
+  segments: TSegmentWithSurveyRefs[]
+): TSegmentActivitySummary => {
+  const activeSurveyMap = new Map(currentSegment.activeSurveys.map((s) => [s.id, s.name]));
+  const inactiveSurveyMap = new Map(currentSegment.inactiveSurveys.map((s) => [s.id, s.name]));
+  const allDirectIds = new Set([...activeSurveyMap.keys(), ...inactiveSurveyMap.keys()]);
+
+  const referencingSegments = getReferencingSegments(segments, currentSegment.id);
+  for (const segment of referencingSegments) {
+    for (const survey of segment.activeSurveys) {
+      if (!allDirectIds.has(survey.id) && !activeSurveyMap.has(survey.id)) {
+        activeSurveyMap.set(survey.id, survey.name);
+      }
+    }
+
+    for (const survey of segment.inactiveSurveys) {
+      if (!allDirectIds.has(survey.id) && !inactiveSurveyMap.has(survey.id)) {
+        inactiveSurveyMap.set(survey.id, survey.name);
+      }
+    }
+  }
+
+  return {
+    activeSurveys: Array.from(activeSurveyMap.values()),
+    inactiveSurveys: Array.from(inactiveSurveyMap.values()),
+  };
+};

apps/web/modules/ee/contacts/segments/components/segment-settings.tsx

@@ -6,7 +6,7 @@ import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
-import type { TBaseFilter, TSegment, TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import type { TBaseFilter, TSegment, TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { ZSegmentFilters } from "@formbricks/types/segment";
 import { cn } from "@/lib/cn";
 import { structuredClone } from "@/lib/pollyfills/structuredClone";
@@ -16,18 +16,21 @@ import { Button } from "@/modules/ui/components/button";
 import { ConfirmDeleteSegmentModal } from "@/modules/ui/components/confirm-delete-segment-modal";
 import { Input } from "@/modules/ui/components/input";
 import { AddFilterModal } from "./add-filter-modal";
+import { TSegmentActivitySummary } from "./segment-activity-utils";
 import { SegmentEditor } from "./segment-editor";
 
 interface TSegmentSettingsTabProps {
+  activitySummary: TSegmentActivitySummary;
   environmentId: string;
   setOpen: (open: boolean) => void;
-  initialSegment: TSegmentWithSurveyNames;
+  initialSegment: TSegmentWithSurveyRefs;
   segments: TSegment[];
   contactAttributeKeys: TContactAttributeKey[];
   isReadOnly: boolean;
 }
 
 export function SegmentSettings({
+  activitySummary,
   environmentId,
   initialSegment,
   setOpen,
@@ -38,7 +41,7 @@ export function SegmentSettings({
   const router = useRouter();
   const { t } = useTranslation();
   const [addFilterModalOpen, setAddFilterModalOpen] = useState(false);
-  const [segment, setSegment] = useState<TSegmentWithSurveyNames>(initialSegment);
+  const [segment, setSegment] = useState<TSegmentWithSurveyRefs>(initialSegment);
 
   const [isUpdatingSegment, setIsUpdatingSegment] = useState(false);
   const [isDeletingSegment, setIsDeletingSegment] = useState(false);
@@ -257,9 +260,9 @@ export function SegmentSettings({
 
             {isDeleteSegmentModalOpen ? (
               <ConfirmDeleteSegmentModal
+                activitySummary={activitySummary}
                 onDelete={handleDeleteSegment}
                 open={isDeleteSegmentModalOpen}
-                segment={initialSegment}
                 setOpen={setIsDeleteSegmentModalOpen}
               />
             ) : null}

apps/web/modules/ee/contacts/segments/components/segment-table-columns.tsx

@@ -4,10 +4,10 @@ import { ColumnDef } from "@tanstack/react-table";
 import { format, formatDistanceToNow } from "date-fns";
 import { TFunction } from "i18next";
 import { UsersIcon } from "lucide-react";
-import { TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 
-export const generateSegmentTableColumns = (t: TFunction): ColumnDef<TSegmentWithSurveyNames>[] => {
+export const generateSegmentTableColumns = (t: TFunction): ColumnDef<TSegmentWithSurveyRefs>[] => {
-  const titleColumn: ColumnDef<TSegmentWithSurveyNames> = {
+  const titleColumn: ColumnDef<TSegmentWithSurveyRefs> = {
     id: "title",
     accessorKey: "title",
     header: t("common.title"),
@@ -28,7 +28,7 @@ export const generateSegmentTableColumns = (t: TFunction): ColumnDef<TSegmentWit
     },
   };
 
-  const updatedAtColumn: ColumnDef<TSegmentWithSurveyNames> = {
+  const updatedAtColumn: ColumnDef<TSegmentWithSurveyRefs> = {
     id: "updatedAt",
     accessorKey: "updatedAt",
     header: t("common.updated_at"),
@@ -41,7 +41,7 @@ export const generateSegmentTableColumns = (t: TFunction): ColumnDef<TSegmentWit
     },
   };
 
-  const createdAtColumn: ColumnDef<TSegmentWithSurveyNames> = {
+  const createdAtColumn: ColumnDef<TSegmentWithSurveyRefs> = {
     id: "createdAt",
     accessorKey: "createdAt",
     header: t("common.created_at"),

apps/web/modules/ee/contacts/segments/components/segment-table-data-row-container.tsx

@@ -1,46 +0,0 @@
-import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
-import { TSegment } from "@formbricks/types/segment";
-import { getSurveysBySegmentId } from "@/lib/survey/service";
-import { SegmentTableDataRow } from "./segment-table-data-row";
-
-type TSegmentTableDataRowProps = {
-  currentSegment: TSegment;
-  segments: TSegment[];
-  contactAttributeKeys: TContactAttributeKey[];
-  isContactsEnabled: boolean;
-  isReadOnly: boolean;
-};
-
-export const SegmentTableDataRowContainer = async ({
-  currentSegment,
-  segments,
-  contactAttributeKeys,
-  isContactsEnabled,
-  isReadOnly,
-}: TSegmentTableDataRowProps) => {
-  const surveys = await getSurveysBySegmentId(currentSegment.id);
-
-  const activeSurveys = surveys?.length
-    ? surveys.filter((survey) => survey.status === "inProgress").map((survey) => survey.name)
-    : [];
-
-  const inactiveSurveys = surveys?.length
-    ? surveys.filter((survey) => ["draft", "paused"].includes(survey.status)).map((survey) => survey.name)
-    : [];
-
-  const filteredSegments = segments.filter((segment) => segment.id !== currentSegment.id);
-
-  return (
-    <SegmentTableDataRow
-      currentSegment={{
-        ...currentSegment,
-        activeSurveys,
-        inactiveSurveys,
-      }}
-      segments={filteredSegments}
-      contactAttributeKeys={contactAttributeKeys}
-      isContactsEnabled={isContactsEnabled}
-      isReadOnly={isReadOnly}
-    />
-  );
-};

apps/web/modules/ee/contacts/segments/components/segment-table-data-row.tsx

@@ -4,11 +4,13 @@ import { format, formatDistanceToNow } from "date-fns";
 import { UsersIcon } from "lucide-react";
 import { useState } from "react";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
-import { TSegment, TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TSegment, TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { EditSegmentModal } from "./edit-segment-modal";
+import { TSegmentActivitySummary } from "./segment-activity-utils";
 
 type TSegmentTableDataRowProps = {
-  currentSegment: TSegmentWithSurveyNames;
+  currentSegment: TSegmentWithSurveyRefs;
+  activitySummary: TSegmentActivitySummary;
   segments: TSegment[];
   contactAttributeKeys: TContactAttributeKey[];
   isContactsEnabled: boolean;
@@ -17,6 +19,7 @@ type TSegmentTableDataRowProps = {
 
 export const SegmentTableDataRow = ({
   currentSegment,
+  activitySummary,
   contactAttributeKeys,
   segments,
   isContactsEnabled,
@@ -62,6 +65,7 @@ export const SegmentTableDataRow = ({
         open={isEditSegmentModalOpen}
         setOpen={setIsEditSegmentModalOpen}
         currentSegment={currentSegment}
+        activitySummary={activitySummary}
         contactAttributeKeys={contactAttributeKeys}
         segments={segments}
         isContactsEnabled={isContactsEnabled}

apps/web/modules/ee/contacts/segments/components/segment-table.tsx

@@ -4,13 +4,15 @@ import { Header, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
-import { TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
 import { EditSegmentModal } from "./edit-segment-modal";
+import { buildSegmentActivitySummaryFromSegments } from "./segment-activity-utils";
 import { generateSegmentTableColumns } from "./segment-table-columns";
 
 interface SegmentTableUpdatedProps {
-  segments: TSegmentWithSurveyNames[];
+  segments: TSegmentWithSurveyRefs[];
+  allSegments: TSegmentWithSurveyRefs[];
   contactAttributeKeys: TContactAttributeKey[];
   isContactsEnabled: boolean;
   isReadOnly: boolean;
@@ -18,16 +20,17 @@ interface SegmentTableUpdatedProps {
 
 export function SegmentTable({
   segments,
+  allSegments,
   contactAttributeKeys,
   isContactsEnabled,
   isReadOnly,
-}: SegmentTableUpdatedProps) {
+}: Readonly<SegmentTableUpdatedProps>) {
   const { t } = useTranslation();
-  const [editingSegment, setEditingSegment] = useState<TSegmentWithSurveyNames | null>(null);
+  const [editingSegment, setEditingSegment] = useState<TSegmentWithSurveyRefs | null>(null);
 
   const columns = useMemo(() => {
     return generateSegmentTableColumns(t);
-  }, []);
+  }, [t]);
 
   const table = useReactTable({
     data: segments,
@@ -35,7 +38,7 @@ export function SegmentTable({
     getCoreRowModel: getCoreRowModel(),
   });
 
-  const getHeader = (header: Header<TSegmentWithSurveyNames, unknown>) => {
+  const getHeader = (header: Header<TSegmentWithSurveyRefs, unknown>) => {
     if (header.isPlaceholder) {
       return null;
     }
@@ -136,6 +139,7 @@ export function SegmentTable({
           open={!!editingSegment}
           setOpen={(open) => !open && setEditingSegment(null)}
           currentSegment={editingSegment}
+          activitySummary={buildSegmentActivitySummaryFromSegments(editingSegment, allSegments)}
           contactAttributeKeys={contactAttributeKeys}
           segments={segments}
           isContactsEnabled={isContactsEnabled}

apps/web/modules/ee/contacts/segments/lib/filter/prisma-query.test.ts

@@ -1,6 +1,6 @@
 import { Prisma } from "@prisma/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { TBaseFilters, TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TBaseFilters, TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { getSegment } from "../segments";
 import { segmentFilterToPrismaQuery } from "./prisma-query";
 
@@ -270,7 +270,7 @@ describe("segmentFilterToPrismaQuery", () => {
     ];
 
     // Mock the getSegment function to return a segment with filters
-    const mockSegment: TSegmentWithSurveyNames = {
+    const mockSegment: TSegmentWithSurveyRefs = {
       id: nestedSegmentId,
       filters: nestedFilters,
       environmentId: mockEnvironmentId,
@@ -336,7 +336,7 @@ describe("segmentFilterToPrismaQuery", () => {
 
     // Mock getSegment to return null for the non-existent segment
     vi.mocked(getSegment).mockResolvedValueOnce(mockSegment);
-    vi.mocked(getSegment).mockResolvedValueOnce(null as unknown as TSegmentWithSurveyNames);
+    vi.mocked(getSegment).mockResolvedValueOnce(null as unknown as TSegmentWithSurveyRefs);
 
     const result = await segmentFilterToPrismaQuery(mockSegmentId, filters, mockEnvironmentId);
 
@@ -426,7 +426,7 @@ describe("segmentFilterToPrismaQuery", () => {
     ];
 
     // Mock the getSegment function to return a segment with filters
-    const mockSegment: TSegmentWithSurveyNames = {
+    const mockSegment: TSegmentWithSurveyRefs = {
       id: nestedSegmentId,
       filters: nestedFilters,
       environmentId: mockEnvironmentId,
@@ -490,7 +490,7 @@ describe("segmentFilterToPrismaQuery", () => {
 
   test("handle circular references in segment filters", async () => {
     // Mock getSegment to simulate a circular reference
-    const circularSegment: TSegmentWithSurveyNames = {
+    const circularSegment: TSegmentWithSurveyRefs = {
       id: mockSegmentId, // Same ID creates the circular reference
       filters: [
         {
@@ -550,7 +550,7 @@ describe("segmentFilterToPrismaQuery", () => {
   test("handle missing segments in segment filters", async () => {
     const nestedSegmentId = "segment-missing-123";
 
-    vi.mocked(getSegment).mockResolvedValue(null as unknown as TSegmentWithSurveyNames);
+    vi.mocked(getSegment).mockResolvedValue(null as unknown as TSegmentWithSurveyRefs);
 
     const filters: TBaseFilters = [
       {
@@ -599,7 +599,7 @@ describe("segmentFilterToPrismaQuery", () => {
     ];
 
     // Mock the nested segment
-    const mockNestedSegment: TSegmentWithSurveyNames = {
+    const mockNestedSegment: TSegmentWithSurveyRefs = {
       id: nestedSegmentId,
       filters: nestedFilters,
       environmentId: mockEnvironmentId,
@@ -890,7 +890,7 @@ describe("segmentFilterToPrismaQuery", () => {
     ];
 
     // Set up the mocks
-    const mockCircularSegment: TSegmentWithSurveyNames = {
+    const mockCircularSegment: TSegmentWithSurveyRefs = {
       id: circularSegmentId,
       filters: circularFilters,
       environmentId: mockEnvironmentId,
@@ -904,7 +904,7 @@ describe("segmentFilterToPrismaQuery", () => {
       inactiveSurveys: [],
     };
 
-    const mockSecondSegment: TSegmentWithSurveyNames = {
+    const mockSecondSegment: TSegmentWithSurveyRefs = {
       id: secondSegmentId,
       filters: secondFilters,
       environmentId: mockEnvironmentId,
@@ -922,7 +922,7 @@ describe("segmentFilterToPrismaQuery", () => {
     vi.mocked(getSegment)
       .mockResolvedValueOnce(mockCircularSegment) // First call for circularSegmentId
       .mockResolvedValueOnce(mockSecondSegment) // Third call for secondSegmentId
-      .mockResolvedValueOnce(null as unknown as TSegmentWithSurveyNames); // Fourth call for non-existent-segment
+      .mockResolvedValueOnce(null as unknown as TSegmentWithSurveyRefs); // Fourth call for non-existent-segment
 
     // Complex filters with mixed error conditions
     const filters: TBaseFilters = [

apps/web/modules/ee/contacts/segments/lib/filter/prisma-query.ts

@@ -361,7 +361,7 @@ const buildSegmentFilterWhereClause = async (
   environmentId: string,
   deviceType?: "phone" | "desktop"
 ): Promise<Prisma.ContactWhereInput> => {
-  const { root } = filter;
+  const { root, qualifier } = filter;
   const { segmentId } = root;
 
   if (segmentPath.has(segmentId)) {
@@ -382,7 +382,22 @@ const buildSegmentFilterWhereClause = async (
   const newPath = new Set(segmentPath);
   newPath.add(segmentId);
 
-  return processFilters(segment.filters, newPath, environmentId, deviceType);
+  const nestedWhereClause = await processFilters(segment.filters, newPath, environmentId, deviceType);
+  const hasNestedConditions = Object.keys(nestedWhereClause).length > 0;
+
+  if (qualifier.operator === "userIsIn") {
+    return nestedWhereClause;
+  }
+
+  if (qualifier.operator === "userIsNotIn") {
+    if (!hasNestedConditions) {
+      return { id: "__SEGMENT_FILTER_NO_MATCH__" };
+    }
+
+    return { NOT: nestedWhereClause };
+  }
+
+  return {};
 };
 
 /**

apps/web/modules/ee/contacts/segments/lib/helper.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { InvalidInputError } from "@formbricks/types/errors";
-import { TBaseFilters, TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TBaseFilters, TSegmentWithSurveyRefs } from "@formbricks/types/segment";
 import { checkForRecursiveSegmentFilter } from "@/modules/ee/contacts/segments/lib/helper";
 import { getSegment } from "@/modules/ee/contacts/segments/lib/segments";
 
@@ -77,7 +77,7 @@ describe("checkForRecursiveSegmentFilter", () => {
       ],
     };
 
-    vi.mocked(getSegment).mockResolvedValue(referencedSegment as unknown as TSegmentWithSurveyNames);
+    vi.mocked(getSegment).mockResolvedValue(referencedSegment as unknown as TSegmentWithSurveyRefs);
 
     // Act & Assert
     // The function should complete without throwing an error

apps/web/modules/ee/contacts/segments/lib/segments.test.ts

@@ -8,7 +8,7 @@ import {
   TEvaluateSegmentUserData,
   TSegmentCreateInput,
   TSegmentUpdateInput,
-  TSegmentWithSurveyNames,
+  TSegmentWithSurveyRefs,
 } from "@formbricks/types/segment";
 import { getSurvey } from "@/lib/survey/service";
 import { validateInputs } from "@/lib/utils/validate";
@@ -79,10 +79,10 @@ const mockSegmentPrisma = {
   surveys: [{ id: surveyId, name: "Test Survey", status: "inProgress" }],
 };
 
-const mockSegment: TSegmentWithSurveyNames = {
+const mockSegment: TSegmentWithSurveyRefs = {
   ...mockSegmentPrisma,
   surveys: [surveyId],
-  activeSurveys: ["Test Survey"],
+  activeSurveys: [{ id: surveyId, name: "Test Survey" }],
   inactiveSurveys: [],
 };
 
@@ -287,7 +287,7 @@ describe("Segment Service Tests", () => {
       ...mockSegment,
       id: clonedSegmentId,
       title: "Copy of Test Segment (1)",
-      activeSurveys: ["Test Survey"],
+      activeSurveys: [{ id: surveyId, name: "Test Survey" }],
       inactiveSurveys: [],
     };
 
@@ -327,7 +327,7 @@ describe("Segment Service Tests", () => {
       const clonedSegment2 = {
         ...clonedSegment,
         title: "Copy of Test Segment (2)",
-        activeSurveys: ["Test Survey"],
+        activeSurveys: [{ id: surveyId, name: "Test Survey" }],
         inactiveSurveys: [],
       };
 
@@ -415,7 +415,7 @@ describe("Segment Service Tests", () => {
       title: surveyId,
       isPrivate: true,
       filters: [],
-      activeSurveys: ["Test Survey"],
+      activeSurveys: [{ id: surveyId, name: "Test Survey" }],
       inactiveSurveys: [],
     };
 
@@ -487,7 +487,7 @@ describe("Segment Service Tests", () => {
     const updatedSegment = {
       ...mockSegment,
       title: "Updated Segment",
-      activeSurveys: ["Test Survey"],
+      activeSurveys: [{ id: surveyId, name: "Test Survey" }],
       inactiveSurveys: [],
     };
     const updateData: TSegmentUpdateInput = { title: "Updated Segment" };
@@ -531,7 +531,7 @@ describe("Segment Service Tests", () => {
         ...updatedSegment,
         surveys: [newSurveyId],
         activeSurveys: [],
-        inactiveSurveys: ["New Survey"],
+        inactiveSurveys: [{ id: newSurveyId, name: "New Survey" }],
       };
 
       vi.mocked(prisma.segment.update).mockResolvedValue(updatedSegmentPrismaWithSurvey);

apps/web/modules/ee/contacts/segments/lib/segments.ts

@@ -25,7 +25,7 @@ import {
   TSegmentPersonFilter,
   TSegmentSegmentFilter,
   TSegmentUpdateInput,
-  TSegmentWithSurveyNames,
+  TSegmentWithSurveyRefs,
   ZRelativeDateValue,
   ZSegmentCreateInput,
   ZSegmentFilters,
@@ -66,14 +66,14 @@ export const selectSegment = {
   },
 } satisfies Prisma.SegmentSelect;
 
-export const transformPrismaSegment = (segment: PrismaSegment): TSegmentWithSurveyNames => {
+export const transformPrismaSegment = (segment: PrismaSegment): TSegmentWithSurveyRefs => {
   const activeSurveys = segment.surveys
     .filter((survey) => survey.status === "inProgress")
-    .map((survey) => survey.name);
+    .map((survey) => ({ id: survey.id, name: survey.name }));
 
   const inactiveSurveys = segment.surveys
     .filter((survey) => survey.status !== "inProgress")
-    .map((survey) => survey.name);
+    .map((survey) => ({ id: survey.id, name: survey.name }));
 
   return {
     ...segment,
@@ -83,7 +83,7 @@ export const transformPrismaSegment = (segment: PrismaSegment): TSegmentWithSurv
   };
 };
 
-export const getSegment = reactCache(async (segmentId: string): Promise<TSegmentWithSurveyNames> => {
+export const getSegment = reactCache(async (segmentId: string): Promise<TSegmentWithSurveyRefs> => {
   validateInputs([segmentId, ZId]);
   try {
     const segment = await prisma.segment.findUnique({
@@ -107,7 +107,7 @@ export const getSegment = reactCache(async (segmentId: string): Promise<TSegment
   }
 });
 
-export const getSegments = reactCache(async (environmentId: string): Promise<TSegmentWithSurveyNames[]> => {
+export const getSegments = reactCache(async (environmentId: string): Promise<TSegmentWithSurveyRefs[]> => {
   validateInputs([environmentId, ZId]);
   try {
     const segments = await prisma.segment.findMany({

apps/web/modules/ee/contacts/segments/page.tsx

@@ -47,6 +47,7 @@ export const SegmentsPage = async ({
       upgradePromptTitle={t("environments.segments.unlock_segments_title")}
       upgradePromptDescription={t("environments.segments.unlock_segments_description")}>
       <SegmentTable
+        allSegments={segments}
         segments={filteredSegments}
         contactAttributeKeys={contactAttributeKeys}
         isContactsEnabled={isContactsEnabled}

apps/web/modules/projects/settings/tags/loading.tsx

@@ -11,7 +11,7 @@ export const TagsLoading = () => {
   return (
     <PageContentWrapper>
       <PageHeader pageTitle={t("common.workspace_configuration")}>
-        <ProjectConfigNavigation activeId="tags" />
+        <ProjectConfigNavigation activeId="tags" loading />
       </PageHeader>
       <SettingsCard
         title={t("environments.workspace.tags.manage_tags")}

apps/web/modules/survey/editor/components/edit-welcome-card.tsx

@@ -129,8 +129,10 @@ export const EditWelcomeCard = ({
                 allowedFileExtensions={["png", "jpeg", "jpg", "webp", "heic"]}
                 environmentId={environmentId}
                 onFileUpload={(url: string[] | undefined, _fileType: "image" | "video") => {
-                  if (url?.[0]) {
+                  if (url?.length) {
                     updateSurvey({ fileUrl: url[0] });
+                  } else {
+                    updateSurvey({ fileUrl: undefined });
                   }
                 }}
                 fileUrl={localSurvey?.welcomeCard?.fileUrl}

apps/web/modules/ui/components/confirm-delete-segment-modal/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { TSegmentWithSurveyNames } from "@formbricks/types/segment";
+import { TSegmentActivitySummary } from "@/modules/ee/contacts/segments/components/segment-activity-utils";
 import { Button } from "@/modules/ui/components/button";
 import {
   Dialog,
@@ -15,16 +15,16 @@ import {
 } from "@/modules/ui/components/dialog";
 
 interface ConfirmDeleteSegmentModalProps {
+  activitySummary: TSegmentActivitySummary;
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  segment: TSegmentWithSurveyNames;
   onDelete: () => Promise<void>;
 }
 
 export const ConfirmDeleteSegmentModal = ({
+  activitySummary,
   onDelete,
   open,
-  segment,
   setOpen,
 }: ConfirmDeleteSegmentModalProps) => {
   const { t } = useTranslation();
@@ -32,9 +32,9 @@ export const ConfirmDeleteSegmentModal = ({
     await onDelete();
   };
 
-  const segmentHasSurveys = useMemo(() => {
+  const allSurveys = useMemo(() => {
-    return segment.activeSurveys.length > 0 || segment.inactiveSurveys.length > 0;
+    return [...activitySummary.activeSurveys, ...activitySummary.inactiveSurveys];
-  }, [segment.activeSurveys.length, segment.inactiveSurveys.length]);
+  }, [activitySummary.activeSurveys, activitySummary.inactiveSurveys]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -46,16 +46,13 @@ export const ConfirmDeleteSegmentModal = ({
           </DialogDescription>
         </DialogHeader>
 
-        {segmentHasSurveys && (
+        {allSurveys.length > 0 && (
           <DialogBody>
             <div className="space-y-2">
               <p>{t("environments.segments.cannot_delete_segment_used_in_surveys")}</p>
               <ol className="my-2 ml-4 list-decimal">
-                {segment.activeSurveys.map((survey) => (
+                {allSurveys.map((surveyName) => (
-                  <li key={survey}>{survey}</li>
+                  <li key={surveyName}>{surveyName}</li>
-                ))}
-                {segment.inactiveSurveys.map((survey) => (
-                  <li key={survey}>{survey}</li>
                 ))}
               </ol>
             </div>
@@ -69,7 +66,7 @@ export const ConfirmDeleteSegmentModal = ({
           <Button variant="secondary" onClick={() => setOpen(false)}>
             {t("common.cancel")}
           </Button>
-          <Button variant="destructive" onClick={handleDelete} disabled={segmentHasSurveys}>
+          <Button variant="destructive" onClick={handleDelete} disabled={allSurveys.length > 0}>
             {t("common.delete")}
           </Button>
         </DialogFooter>

packages/js-core/src/lib/common/setup.ts

@@ -6,7 +6,7 @@ import { Logger } from "@/lib/common/logger";
 import { getIsSetup, setIsSetup } from "@/lib/common/status";
 import { filterSurveys, getIsDebug, isNowExpired, wrapThrows } from "@/lib/common/utils";
 import { fetchEnvironmentState } from "@/lib/environment/state";
-import { closeSurvey } from "@/lib/survey/widget";
+import { closeSurvey, preloadSurveysScript } from "@/lib/survey/widget";
 import { DEFAULT_USER_STATE_NO_USER_ID } from "@/lib/user/state";
 import { sendUpdatesToBackend } from "@/lib/user/update";
 import {
@@ -316,6 +316,9 @@ export const setup = async (
   addEventListeners();
   addCleanupEventListeners();
 
+  // Preload surveys script so it's ready when a survey triggers
+  preloadSurveysScript(configInput.appUrl);
+
   setIsSetup(true);
   logger.debug("Set up complete");
 

packages/js-core/src/lib/survey/widget.ts

@@ -11,6 +11,7 @@ import {
   handleHiddenFields,
   shouldDisplayBasedOnPercentage,
 } from "@/lib/common/utils";
+import { UpdateQueue } from "@/lib/user/update-queue";
 import { type TEnvironmentStateSurvey, type TUserState } from "@/types/config";
 import { type TTrackProperties } from "@/types/survey";
 
@@ -60,6 +61,24 @@ export const renderWidget = async (
 
   setIsSurveyRunning(true);
 
+  // Wait for pending user identification to complete before rendering
+  const updateQueue = UpdateQueue.getInstance();
+  if (updateQueue.hasPendingWork()) {
+    logger.debug("Waiting for pending user identification before rendering survey");
+    const identificationSucceeded = await updateQueue.waitForPendingWork();
+    if (!identificationSucceeded) {
+      const hasSegmentFilters = Array.isArray(survey.segment?.filters) && survey.segment.filters.length > 0;
+
+      if (hasSegmentFilters) {
+        logger.debug("User identification failed. Skipping survey with segment filters.");
+        setIsSurveyRunning(false);
+        return;
+      }
+
+      logger.debug("User identification failed but survey has no segment filters. Proceeding.");
+    }
+  }
+
   if (survey.delay) {
     logger.debug(`Delaying survey "${survey.name}" by ${survey.delay.toString()} seconds.`);
   }
@@ -87,7 +106,15 @@ export const renderWidget = async (
   const overlay = projectOverwrites.overlay ?? project.overlay;
   const placement = projectOverwrites.placement ?? project.placement;
   const isBrandingEnabled = project.inAppSurveyBranding;
-  const formbricksSurveys = await loadFormbricksSurveysExternally();
+
+  let formbricksSurveys: TFormbricksSurveys;
+  try {
+    formbricksSurveys = await loadFormbricksSurveysExternally();
+  } catch (error) {
+    logger.error(`Failed to load surveys library: ${String(error)}`);
+    setIsSurveyRunning(false);
+    return;
+  }
 
   const recaptchaSiteKey = config.get().environment.data.recaptchaSiteKey;
   const isSpamProtectionEnabled = Boolean(recaptchaSiteKey && survey.recaptcha?.enabled);
@@ -200,30 +227,87 @@ export const removeWidgetContainer = (): void => {
   document.getElementById(CONTAINER_ID)?.remove();
 };
 
-const loadFormbricksSurveysExternally = (): Promise<typeof globalThis.window.formbricksSurveys> => {
+const SURVEYS_LOAD_TIMEOUT_MS = 10000;
-  const config = Config.getInstance();
+const SURVEYS_POLL_INTERVAL_MS = 200;
 
+type TFormbricksSurveys = typeof globalThis.window.formbricksSurveys;
+
+let surveysLoadPromise: Promise<TFormbricksSurveys> | null = null;
+
+const waitForSurveysGlobal = (): Promise<TFormbricksSurveys> => {
   return new Promise((resolve, reject) => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- We need to check if the formbricksSurveys object exists
+    const startTime = Date.now();
-    if (globalThis.window.formbricksSurveys) {
+
-      resolve(globalThis.window.formbricksSurveys);
+    const check = (): void => {
-    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
-      const script = document.createElement("script");
+      if (globalThis.window.formbricksSurveys) {
-      script.src = `${config.get().appUrl}/js/surveys.umd.cjs`;
-      script.async = true;
-      script.onload = () => {
-        // Apply stored nonce if it was set before surveys package loaded
         const storedNonce = globalThis.window.__formbricksNonce;
         if (storedNonce) {
           globalThis.window.formbricksSurveys.setNonce(storedNonce);
         }
         resolve(globalThis.window.formbricksSurveys);
-      };
+        return;
-      script.onerror = (error) => {
+      }
-        console.error("Failed to load Formbricks Surveys library:", error);
+
-        reject(new Error(`Failed to load Formbricks Surveys library: ${error as string}`));
+      if (Date.now() - startTime >= SURVEYS_LOAD_TIMEOUT_MS) {
-      };
+        reject(new Error("Formbricks Surveys library did not become available within timeout"));
-      document.head.appendChild(script);
+        return;
-    }
+      }
+
+      setTimeout(check, SURVEYS_POLL_INTERVAL_MS);
+    };
+
+    check();
   });
 };
+
+const loadFormbricksSurveysExternally = (): Promise<TFormbricksSurveys> => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+  if (globalThis.window.formbricksSurveys) {
+    return Promise.resolve(globalThis.window.formbricksSurveys);
+  }
+
+  if (surveysLoadPromise) {
+    return surveysLoadPromise;
+  }
+
+  surveysLoadPromise = new Promise<TFormbricksSurveys>((resolve, reject: (error: unknown) => void) => {
+    const config = Config.getInstance();
+    const script = document.createElement("script");
+    script.src = `${config.get().appUrl}/js/surveys.umd.cjs`;
+    script.async = true;
+    script.onload = () => {
+      waitForSurveysGlobal()
+        .then(resolve)
+        .catch((error: unknown) => {
+          surveysLoadPromise = null;
+          console.error("Failed to load Formbricks Surveys library:", error);
+          reject(new Error(`Failed to load Formbricks Surveys library`));
+        });
+    };
+    script.onerror = (error) => {
+      surveysLoadPromise = null;
+      console.error("Failed to load Formbricks Surveys library:", error);
+      reject(new Error(`Failed to load Formbricks Surveys library`));
+    };
+    document.head.appendChild(script);
+  });
+
+  return surveysLoadPromise;
+};
+
+let isPreloaded = false;
+
+export const preloadSurveysScript = (appUrl: string): void => {
+  // Don't preload if already loaded or already preloading
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+  if (globalThis.window.formbricksSurveys) return;
+  if (isPreloaded) return;
+
+  isPreloaded = true;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  link.as = "script";
+  link.href = `${appUrl}/js/surveys.umd.cjs`;
+  document.head.appendChild(link);
+};

packages/js-core/src/lib/user/update-queue.ts

@@ -8,7 +8,9 @@ export class UpdateQueue {
   private static instance: UpdateQueue | null = null;
   private updates: TUpdates | null = null;
   private debounceTimeout: NodeJS.Timeout | null = null;
+  private pendingFlush: Promise<void> | null = null;
   private readonly DEBOUNCE_DELAY = 500;
+  private readonly PENDING_WORK_TIMEOUT = 5000;
 
   private constructor() {}
 
@@ -63,17 +65,45 @@ export class UpdateQueue {
     return !this.updates;
   }
 
+  public hasPendingWork(): boolean {
+    return this.updates !== null || this.pendingFlush !== null;
+  }
+
+  public async waitForPendingWork(): Promise<boolean> {
+    if (!this.hasPendingWork()) return true;
+
+    const flush = this.pendingFlush ?? this.processUpdates();
+    try {
+      const succeeded = await Promise.race([
+        flush.then(() => true as const),
+        new Promise<false>((resolve) => {
+          setTimeout(() => {
+            resolve(false);
+          }, this.PENDING_WORK_TIMEOUT);
+        }),
+      ]);
+      return succeeded;
+    } catch {
+      return false;
+    }
+  }
+
   public async processUpdates(): Promise<void> {
     const logger = Logger.getInstance();
     if (!this.updates) {
       return;
     }
 
+    // If a flush is already in flight, reuse it instead of creating a new promise
+    if (this.pendingFlush) {
+      return this.pendingFlush;
+    }
+
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
     }
 
-    return new Promise((resolve, reject) => {
+    const flushPromise = new Promise<void>((resolve, reject) => {
       const handler = async (): Promise<void> => {
         try {
           let currentUpdates = { ...this.updates };
@@ -147,8 +177,10 @@ export class UpdateQueue {
           }
 
           this.clearUpdates();
+          this.pendingFlush = null;
           resolve();
         } catch (error: unknown) {
+          this.pendingFlush = null;
           logger.error(
             `Failed to process updates: ${error instanceof Error ? error.message : "Unknown error"}`
           );
@@ -158,5 +190,8 @@ export class UpdateQueue {
 
       this.debounceTimeout = setTimeout(() => void handler(), this.DEBOUNCE_DELAY);
     });
+
+    this.pendingFlush = flushPromise;
+    return flushPromise;
   }
 }

packages/survey-ui/src/components/general/label.tsx

@@ -1,4 +1,4 @@
-import DOMPurify from "isomorphic-dompurify";
+import { sanitize } from "isomorphic-dompurify";
 import * as React from "react";
 import { cn, stripInlineStyles } from "@/lib/utils";
 
@@ -39,7 +39,7 @@ function Label({
   const isHtml = childrenString ? isValidHTML(strippedContent) : false;
   const safeHtml =
     isHtml && strippedContent
-      ? DOMPurify.sanitize(strippedContent, {
+      ? sanitize(strippedContent, {
           ADD_ATTR: ["target"],
           FORBID_ATTR: ["style"],
         })

packages/survey-ui/src/lib/utils.ts

@@ -1,5 +1,5 @@
 import { type ClassValue, clsx } from "clsx";
-import DOMPurify from "isomorphic-dompurify";
+import { sanitize } from "isomorphic-dompurify";
 import { extendTailwindMerge } from "tailwind-merge";
 
 const twMerge = extendTailwindMerge({
@@ -27,14 +27,16 @@ export function cn(...inputs: ClassValue[]): string {
 export const stripInlineStyles = (html: string): string => {
   if (!html) return html;
 
-  // Use DOMPurify to safely remove style attributes
+  // Pre-strip style attributes from the raw string BEFORE DOMPurify parses it.
-  // This is more secure than regex-based approaches and handles edge cases properly
+  // DOMPurify internally uses innerHTML to parse HTML, which triggers CSP
-  return DOMPurify.sanitize(html, {
+  // `style-src` violations at parse time — before FORBID_ATTR can strip them.
+  // The regex is O(n) safe: [^"]* and [^']* are negated classes bounded by
+  // fixed quote delimiters, so no backtracking can occur.
+  const preStripped = html.replaceAll(/ style="[^"]*"| style='[^']*'/gi, "");
+
+  return sanitize(preStripped, {
     FORBID_ATTR: ["style"],
-    // Preserve the target attribute (e.g. target="_blank" on links) which is not
-    // in DOMPurify's default allow-list but is explicitly required downstream.
     ADD_ATTR: ["target"],
-    // Keep other attributes and tags as-is, only remove style attributes
     KEEP_CONTENT: true,
   });
 };

packages/survey-ui/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "isolatedModules": true,
     "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ES2020", "ES2021.String"],
     "noEmit": true,
     "paths": {
       "@/*": ["./src/*"]

packages/surveys/src/lib/html-utils.ts

@@ -10,14 +10,16 @@ import DOMPurify from "isomorphic-dompurify";
 export const stripInlineStyles = (html: string): string => {
   if (!html) return html;
 
-  // Use DOMPurify to safely remove style attributes
+  // Pre-strip style attributes from the raw string BEFORE DOMPurify parses it.
-  // This is more secure than regex-based approaches and handles edge cases properly
+  // DOMPurify internally uses innerHTML to parse HTML, which triggers CSP
-  return DOMPurify.sanitize(html, {
+  // `style-src` violations at parse time — before FORBID_ATTR can strip them.
+  // The regex is O(n) safe: [^"]* and [^']* are negated classes bounded by
+  // fixed quote delimiters, so no backtracking can occur.
+  const preStripped = html.replaceAll(/ style="[^"]*"| style='[^']*'/gi, "");
+
+  return DOMPurify.sanitize(preStripped, {
     FORBID_ATTR: ["style"],
-    // Preserve the target attribute (e.g. target="_blank" on links) which is not
-    // in DOMPurify's default allow-list but is explicitly required downstream.
     ADD_ATTR: ["target"],
-    // Keep other attributes and tags as-is, only remove style attributes
     KEEP_CONTENT: true,
   });
 };

packages/surveys/src/lib/i18n.ts

@@ -41,9 +41,16 @@ export const getLocalizedValue = (
  * This ensures translations are always available, even when called from API routes
  */
 export const getTranslations = (languageCode: string): TFunction => {
+  // "default" is a Formbricks-internal language identifier, not a valid i18next locale.
+  // When "default" is passed, use the current i18n language (which was already resolved
+  // to a real locale by the I18nProvider or LanguageSwitch). Calling
+  // i18n.changeLanguage("default") would cause i18next to fall back to "en", resetting
+  // the user's selected language (see issue #7515).
+  const resolvedCode = languageCode === "default" ? i18n.language : languageCode;
+
   // Ensure the language is set (i18n.changeLanguage is synchronous when resources are already loaded)
-  if (i18n.language !== languageCode) {
+  if (i18n.language !== resolvedCode) {
-    i18n.changeLanguage(languageCode);
+    i18n.changeLanguage(resolvedCode);
   }
-  return i18n.getFixedT(languageCode);
+  return i18n.getFixedT(resolvedCode);
 };

packages/types/segment.ts

@@ -357,9 +357,13 @@ export const ZSegmentCreateInput = z.object({
 export type TSegmentCreateInput = z.infer<typeof ZSegmentCreateInput>;
 
 export type TSegment = z.infer<typeof ZSegment>;
-export type TSegmentWithSurveyNames = TSegment & {
+export interface TSegmentSurveyReference {
-  activeSurveys: string[];
+  id: string;
-  inactiveSurveys: string[];
+  name: string;
+}
+export type TSegmentWithSurveyRefs = TSegment & {
+  activeSurveys: TSegmentSurveyReference[];
+  inactiveSurveys: TSegmentSurveyReference[];
 };
 
 export const ZSegmentUpdateInput = z