fix: onboarding skips + track sdk setup success (#2191)

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

@@ -6,6 +6,7 @@ import Lost from "@/images/onboarding-lost.gif";
 import { ArrowRight } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
 import { useEffect, useState } from "react";
 
 import { TEnvironment } from "@formbricks/types/environment";
@@ -47,6 +48,8 @@ const useVisibilityChange = (environment, setLocalEnvironment) => {
 
 const ConnectedState = ({ goToProduct }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const posthog = usePostHog();
+  posthog.capture("onboarding-sdk-connected");
   return (
     <div className="flex w-full max-w-xl flex-col gap-8">
       <OnboardingTitle title="We are connected!" subtitle="From now on it's a piece of cake 🍰" />
@@ -74,7 +77,7 @@ const ConnectedState = ({ goToProduct }) => {
 
 const NotConnectedState = ({ environment, webAppUrl, jsPackageVersion, goToTeamInvitePage }) => {
   return (
-    <div className="group mb-8 w-full max-w-xl space-y-8">
+    <div className="mb-8 w-full max-w-xl space-y-8">
       <OnboardingTitle
         title="Connect your app or website"
         subtitle="It takes just a few minutes to set it up."
@@ -93,7 +96,7 @@ const NotConnectedState = ({ environment, webAppUrl, jsPackageVersion, goToTeamI
       <div className="flex justify-center">
         <Button
           id="onboarding-inapp-connect-not-sure-how-to-do-this"
-          className="opacity-0 transition-all delay-[3000ms] duration-500 ease-in-out group-hover:opacity-100"
+          className="mt-8 font-normal text-slate-400"
           variant="minimal"
           onClick={goToTeamInvitePage}>
           I am not sure how to do this

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

@@ -84,7 +84,7 @@ export function InviteTeamMate({ team, environmentId, setCurrentStep }: InviteTe
   };
 
   return (
-    <div className="group mb-8 w-full max-w-xl space-y-8">
+    <div className="mb-8 w-full max-w-xl space-y-8">
       <OnboardingTitle
         title="Invite your team to help out"
         subtitle="Ask your tech-savvy co-worker to finish the setup:"
@@ -116,7 +116,7 @@ export function InviteTeamMate({ team, environmentId, setCurrentStep }: InviteTe
         <div className="mt-auto flex justify-center">
           <Button
             id="onboarding-inapp-invite-have-a-look-first"
-            className="opacity-0 transition-all delay-[3000ms] duration-500 ease-in-out group-hover:opacity-100"
+            className="font-normal text-slate-400"
             variant="minimal"
             onClick={goToProduct}
             loading={isLoading}>

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

@@ -150,7 +150,7 @@ export function Onboarding({
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center bg-slate-50">
+    <div className="group flex h-full w-full flex-col items-center bg-slate-50">
       <div className="hidden">
         <button
           id="FB__INTERNAL__SKIP_ONBOARDING"