fix: displayPercentage not working for inline-triggers (#2340)

packages/js/src/lib/actions.ts

@@ -1,24 +1,18 @@
 import { FormbricksAPI } from "@formbricks/api";
 import { TJsActionInput } from "@formbricks/types/js";
-import { TSurvey } from "@formbricks/types/surveys";
 
 import { Config } from "./config";
 import { NetworkError, Result, err, okVoid } from "./errors";
 import { Logger } from "./logger";
 import { sync } from "./sync";
 import { getIsDebug } from "./utils";
-import { renderWidget } from "./widget";
+import { triggerSurvey } from "./widget";
 
 const logger = Logger.getInstance();
 const config = Config.getInstance();
 
 const intentsToNotCreateOnApp = ["Exit Intent (Desktop)", "50% Scroll"];
 
-const shouldDisplayBasedOnPercentage = (displayPercentage: number) => {
-  const randomNum = Math.floor(Math.random() * 100) + 1;
-  return randomNum <= displayPercentage;
-};
-
 export const trackAction = async (name: string): Promise<Result<void, NetworkError>> => {
   const {
     userId,
@@ -31,7 +25,7 @@ export const trackAction = async (name: string): Promise<Result<void, NetworkErr
     const { codeConfig } = inlineTriggers ?? {};
 
     if (name === codeConfig?.identifier) {
-      await renderWidget(survey);
+      await triggerSurvey(survey);
       return;
     }
   });
@@ -86,30 +80,16 @@ export const trackAction = async (name: string): Promise<Result<void, NetworkErr
   const activeSurveys = config.get().state?.surveys;
 
   if (!!activeSurveys && activeSurveys.length > 0) {
-    await triggerSurvey(name, activeSurveys);
+    for (const survey of activeSurveys) {
+      for (const trigger of survey.triggers) {
+        if (trigger === name) {
+          await triggerSurvey(survey);
+        }
+      }
+    }
   } else {
     logger.debug("No active surveys to display");
   }
 
   return okVoid();
 };
-
-export const triggerSurvey = async (actionName: string, activeSurveys: TSurvey[]): Promise<void> => {
-  for (const survey of activeSurveys) {
-    // Check if the survey should be displayed based on displayPercentage
-    if (survey.displayPercentage) {
-      const shouldDisplaySurvey = shouldDisplayBasedOnPercentage(survey.displayPercentage);
-      if (!shouldDisplaySurvey) {
-        logger.debug("Survey display skipped based on displayPercentage.");
-        continue;
-      }
-    }
-    for (const trigger of survey.triggers) {
-      if (trigger === actionName) {
-        logger.debug(`Formbricks: survey ${survey.id} triggered by action "${actionName}"`);
-        await renderWidget(survey);
-        return;
-      }
-    }
-  }
-};

packages/js/src/lib/noCodeActions.ts

@@ -6,7 +6,7 @@ import { trackAction } from "./actions";
 import { Config } from "./config";
 import { ErrorHandler, InvalidMatchTypeError, NetworkError, Result, err, match, ok, okVoid } from "./errors";
 import { Logger } from "./logger";
-import { renderWidget } from "./widget";
+import { triggerSurvey } from "./widget";
 
 const config = Config.getInstance();
 const logger = Logger.getInstance();
@@ -60,7 +60,7 @@ export const checkPageUrl = async (): Promise<Result<void, InvalidMatchTypeError
         if (match.ok !== true) return err(match.error);
         if (match.value === false) return;
 
-        renderWidget(survey);
+        triggerSurvey(survey);
       }
     });
   }
@@ -161,8 +161,8 @@ export const checkClickMatch = (event: MouseEvent) => {
   const targetElement = event.target as HTMLElement;
 
   noCodeActionClasses.forEach((action: TActionClass) => {
-    const shouldTrack = evaluateNoCodeConfig(targetElement, action);
-    if (shouldTrack) {
+    const isMatch = evaluateNoCodeConfig(targetElement, action);
+    if (isMatch) {
       trackAction(action.name).then((res) => {
         match(
           res,
@@ -184,9 +184,9 @@ export const checkClickMatch = (event: MouseEvent) => {
   activeSurveys.forEach((survey) => {
     const { inlineTriggers } = survey;
     if (inlineTriggers) {
-      const shouldTrack = evaluateNoCodeConfig(targetElement, inlineTriggers);
-      if (shouldTrack) {
-        renderWidget(survey);
+      const isMatch = evaluateNoCodeConfig(targetElement, inlineTriggers);
+      if (isMatch) {
+        triggerSurvey(survey);
       }
     }
   });

packages/js/src/lib/widget.ts

@@ -25,7 +25,24 @@ export const setIsSurveyRunning = (value: boolean) => {
   isSurveyRunning = value;
 };
 
-export const renderWidget = async (survey: TSurvey) => {
+const shouldDisplayBasedOnPercentage = (displayPercentage: number) => {
+  const randomNum = Math.floor(Math.random() * 100) + 1;
+  return randomNum <= displayPercentage;
+};
+
+export const triggerSurvey = async (survey: TSurvey): Promise<void> => {
+  // Check if the survey should be displayed based on displayPercentage
+  if (survey.displayPercentage) {
+    const shouldDisplaySurvey = shouldDisplayBasedOnPercentage(survey.displayPercentage);
+    if (!shouldDisplaySurvey) {
+      logger.debug("Survey display skipped based on displayPercentage.");
+      return; // skip displaying the survey
+    }
+    await renderWidget(survey);
+  }
+};
+
+const renderWidget = async (survey: TSurvey) => {
   if (isSurveyRunning) {
     logger.debug("A survey is already running. Skipping.");
     return;