fix: onboarding issues (#2373)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/web/app/(app)/onboarding/components/PathwaySelect.tsx

@@ -37,7 +37,7 @@ export default function PathwaySelect({
   };
 
   return (
-    <div className="space-y-16 text-center">
+    <div className="space-y-16 p-6 text-center">
       <OnboardingTitle
         title="How would you like to start?"
         subtitle="You can always use all types of surveys later on."

apps/web/app/(app)/onboarding/components/inapp/ConnectWithFormbricks.tsx

@@ -99,7 +99,7 @@ const NotConnectedState = ({ environment, webAppUrl, jsPackageVersion, goToTeamI
           className="mt-8 font-normal text-slate-400"
           variant="minimal"
           onClick={goToTeamInvitePage}>
-          I am not sure how to do this
+          Skip
           <ArrowRight className="ml-2 h-4 w-4" />
         </Button>
       </div>

apps/web/app/(app)/onboarding/components/inapp/InviteTeamMate.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import OnboardingTitle from "@/app/(app)/onboarding/components/OnboardingTitle";
-import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -108,21 +107,22 @@ export function InviteTeamMate({ team, environmentId, setCurrentStep }: InviteTe
             <Button id="onboarding-inapp-invite-back" variant="minimal" onClick={() => goBackToConnectPage()}>
               Back
             </Button>
-            <Button id="onboarding-inapp-invite-send-invite" variant="darkCTA" onClick={handleInvite}>
-              Invite
-            </Button>
+            <div className="space-x-2">
+              <Button
+                id="onboarding-inapp-invite-have-a-look-first"
+                className="font-normal text-slate-400"
+                variant="minimal"
+                onClick={goToProduct}
+                loading={isLoading}>
+                Skip
+              </Button>
+              <Button id="onboarding-inapp-invite-send-invite" variant="darkCTA" onClick={handleInvite}>
+                Invite
+              </Button>
+            </div>
           </div>
         </div>
-        <div className="mt-auto flex justify-center">
-          <Button
-            id="onboarding-inapp-invite-have-a-look-first"
-            className="font-normal text-slate-400"
-            variant="minimal"
-            onClick={goToProduct}
-            loading={isLoading}>
-            I want to have a look around first <ArrowRight className="ml-2 h-4 w-4" />
-          </Button>
-        </div>
+        <div className="mt-auto flex justify-center"></div>
       </div>
     </div>
   );

apps/web/app/(app)/onboarding/components/onboarding.tsx

@@ -156,6 +156,10 @@ export function Onboarding({
         <button
           id="FB__INTERNAL__SKIP_ONBOARDING"
           onClick={async () => {
+            if (typeof localStorage !== undefined) {
+              localStorage.removeItem("onboardingPathway");
+              localStorage.removeItem("onboardingCurrentStep");
+            }
             await finishOnboardingAction();
             router.push(`/environments/${environment.id}/surveys`);
           }}>

apps/web/app/api/v1/client/[environmentId]/in-app/sync/[userId]/route.ts

@@ -21,6 +21,7 @@ import {
   getMonthlyTeamResponseCount,
   getTeamByEnvironmentId,
 } from "@formbricks/lib/team/service";
+import { updateUser } from "@formbricks/lib/user/service";
 import { isVersionGreaterThanOrEqualTo } from "@formbricks/lib/utils/version";
 import { TLegacySurvey } from "@formbricks/types/LegacySurvey";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -75,6 +76,7 @@ export async function GET(
       const firstSurvey = getExampleSurveyTemplate(WEBAPP_URL);
       await createSurvey(environmentId, firstSurvey);
       await updateEnvironment(environment.id, { widgetSetupCompleted: true });
+      await updateUser(userId, { onboardingCompleted: true });
     }
     // check team subscriptions
     const team = await getTeamByEnvironmentId(environmentId);

apps/web/app/lib/formbricks.ts

@@ -1,3 +1,4 @@
+import { FormbricksAPI } from "@formbricks/api";
 import formbricks from "@formbricks/js";
 import { env } from "@formbricks/lib/env";
 
@@ -5,13 +6,27 @@ export const formbricksEnabled =
   typeof env.NEXT_PUBLIC_FORMBRICKS_API_HOST && env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID;
 const ttc = { onboarding: 0 };
 
+const getFormbricksApi = () => {
+  const environmentId = env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID;
+  const apiHost = env.NEXT_PUBLIC_FORMBRICKS_API_HOST;
+
+  if (typeof environmentId !== "string" || typeof apiHost !== "string") {
+    throw new Error("Formbricks environment ID or API host is not defined");
+  }
+
+  return new FormbricksAPI({
+    environmentId,
+    apiHost,
+  });
+};
+
 export const createResponse = async (
   surveyId: string,
   userId: string,
   data: { [questionId: string]: any },
   finished: boolean = false
 ): Promise<any> => {
-  const api = formbricks.getApi();
+  const api = getFormbricksApi();
   return await api.client.response.create({
     surveyId,
     userId,
@@ -26,7 +41,7 @@ export const updateResponse = async (
   data: { [questionId: string]: any },
   finished: boolean = false
 ): Promise<any> => {
-  const api = formbricks.getApi();
+  const api = getFormbricksApi();
   return await api.client.response.update({
     responseId,
     finished,

packages/js/src/index.ts

@@ -63,7 +63,6 @@ const formbricksProxyHandler: ProxyHandler<any> = {
 
       try {
         return window.formbricks[prop](...args);
-        return;
       } catch (error) {
         console.error(error);
         throw error;