feat(analytics): add behavior and payment funnel tracking

src/app/chat/hooks/use-chat-message-limit-banner.ts

@@ -1,6 +1,9 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+
 import type { LoginStatus } from "@/data/dto/auth";
+import { behaviorAnalytics } from "@/lib/analytics";
 import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import type { ChatUpgradeReason } from "@/stores/chat/chat-state";
@@ -33,6 +36,27 @@ export function useChatMessageLimitBanner({
   const navigator = useAppNavigator();
   const isVip = useUserSelector((state) => state.context.isVip);
   const view = getInsufficientCreditsMessageLimitView(loginStatus);
+  const visible = shouldShowMessageLimitBanner({
+    upgradePromptVisible,
+    upgradeReason,
+  });
+  const trackedVisibleRef = useRef(false);
+
+  useEffect(() => {
+    if (!visible) {
+      trackedVisibleRef.current = false;
+      return;
+    }
+    if (trackedVisibleRef.current) return;
+    trackedVisibleRef.current = true;
+    behaviorAnalytics.paywallShown(
+      {
+        entryPoint: "chat_input",
+        triggerReason: "insufficient_credits",
+      },
+      { isVip },
+    );
+  }, [isVip, visible]);
 
   function unlock(): void {
     if (view.action === "auth") {
@@ -43,15 +67,16 @@ export function useChatMessageLimitBanner({
     navigator.openSubscription({
       type: getInsufficientCreditsSubscriptionType(isVip),
       returnTo: "chat",
+      analytics: {
+        entryPoint: "chat_input",
+        triggerReason: "insufficient_credits",
+      },
     });
   }
 
   return {
     ...view,
-    visible: shouldShowMessageLimitBanner({
-      upgradePromptVisible,
-      upgradeReason,
-    }),
+    visible,
     unlock,
   };
 }