Multiple fixes for Formbricks usage within Formbricks (#336)

* use label instead of id in onboarding analysis, add logout to formbricks usage

* add await option for all sdk commands, fix logout bug in formbricks usage

apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx

@@ -60,6 +60,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import AddProductModal from "./AddProductModal";
+import { formbricksLogout } from "@/lib/formbricks";
 
 interface EnvironmentsNavbarProps {
   environmentId: string;
@@ -418,9 +419,10 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                   <DropdownMenuItem
-                    onClick={() => {
-                      signOut();
+                    onClick={async () => {
                       setLoading(true);
+                      await signOut();
+                      await formbricksLogout();
                     }}>
                     <div className="flex h-full w-full items-center">
                       <ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />

apps/web/app/environments/[environmentId]/FormbricksClient.tsx

@@ -8,6 +8,7 @@ if (typeof window !== "undefined" && formbricksEnabled) {
   formbricks.init({
     environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID || "",
     apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST || "",
+    logLevel: "debug",
   });
 }
 

apps/web/app/onboarding/Objective.tsx

@@ -55,7 +55,7 @@ const Objective: React.FC<ObjectiveProps> = ({ next, skip, formbricksResponseId
           formbricksResponseId
         ) {
           const res = await updateResponse(formbricksResponseId, {
-            objective: selectedObjective.id,
+            objective: selectedObjective.label,
           });
           if (!res.ok) {
             console.error("Error updating response", res.error);

apps/web/app/onboarding/Role.tsx

@@ -52,7 +52,7 @@ const Role: React.FC<RoleProps> = ({ next, skip, setFormbricksResponseId }) => {
           const res = await createResponse(
             process.env.NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID as SurveyId,
             {
-              role: selectedRole.id,
+              role: selectedRole.label,
             }
           );
           if (res.ok) {

apps/web/lib/formbricks.ts

@@ -30,3 +30,7 @@ export const updateResponse = async (
     data,
   });
 };
+
+export const formbricksLogout = async () => {
+  return await formbricks.logout();
+};

apps/web/pages/api/v1/client/environments/[environmentId]/people/[personId]/user-id.ts

@@ -59,7 +59,7 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
         },
       },
     });
-    // if person exists, reconnect ression and delete old user
+    // if person exists, reconnect session and delete old user
     if (existingPerson) {
       // reconnect session to new person
       await prisma.session.update({

packages/js/src/index.ts

@@ -16,37 +16,45 @@ const logger = Logger.getInstance();
 logger.debug("Create command queue");
 const queue = new CommandQueue();
 
-const init = (initConfig: InitConfig) => {
+const init = async (initConfig: InitConfig) => {
   ErrorHandler.init(initConfig.errorHandler);
   queue.add(false, initialize, initConfig);
+  await queue.wait();
 };
 
-const setUserId = (userId: string): void => {
+const setUserId = async (userId: string): Promise<void> => {
   queue.add(true, setPersonUserId, userId);
+  await queue.wait();
 };
 
-const setEmail = (email: string): void => {
+const setEmail = async (email: string): Promise<void> => {
   setAttribute("email", email);
+  await queue.wait();
 };
 
-const setAttribute = (key: string, value: string): void => {
+const setAttribute = async (key: string, value: string): Promise<void> => {
   queue.add(true, setPersonAttribute, key, value);
+  await queue.wait();
 };
 
-const logout = (): void => {
+const logout = async (): Promise<void> => {
   queue.add(true, resetPerson);
+  await queue.wait();
 };
 
-const track = (eventName: string, properties: any = {}): void => {
+const track = async (eventName: string, properties: any = {}): Promise<void> => {
   queue.add(true, trackEvent, eventName, properties);
+  await queue.wait();
 };
 
-const refresh = (): void => {
+const refresh = async (): Promise<void> => {
   queue.add(true, refreshSettings);
+  await queue.wait();
 };
 
-const registerRouteChange = (): void => {
+const registerRouteChange = async (): Promise<void> => {
   queue.add(true, checkPageUrl);
+  await queue.wait();
 };
 
 const formbricks = {

packages/js/src/lib/commandQueue.ts

@@ -8,6 +8,8 @@ export class CommandQueue {
     commandArgs: any[];
   }[] = [];
   private running: boolean = false;
+  private resolvePromise: (() => void) | null = null;
+  private commandPromise: Promise<void> | null = null;
 
   public add<A>(
     checkInitialized: boolean = true,
@@ -17,7 +19,16 @@ export class CommandQueue {
     this.queue.push({ command, checkInitialized, commandArgs: args });
 
     if (!this.running) {
-      this.run();
+      this.commandPromise = new Promise((resolve) => {
+        this.resolvePromise = resolve;
+        this.run();
+      });
+    }
+  }
+
+  public async wait() {
+    if (this.running) {
+      await this.commandPromise;
     }
   }
 
@@ -38,14 +49,13 @@ export class CommandQueue {
 
       if (!result) continue;
 
-      /* logger.debug(
-        `Command result: ${result.ok === true ? "OK" : "Something went really wrong"}, ${
-          currentItem.command.name
-        }`
-      ); */
-
       if (result.ok !== true) errorHandler.handle(result.error);
     }
     this.running = false;
+    if (this.resolvePromise) {
+      this.resolvePromise();
+      this.resolvePromise = null;
+      this.commandPromise = null;
+    }
   }
 }