From 51eaa538f1a78e1b8a00653da208e229e32da48d Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Sun, 23 Apr 2023 14:49:31 +0200
Subject: [PATCH] add profileMenu events

---
 src/components/ProfileMenu.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/ProfileMenu.tsx b/src/components/ProfileMenu.tsx
index a99021e..80248cd 100644
--- a/src/components/ProfileMenu.tsx
+++ b/src/components/ProfileMenu.tsx
@@ -3,12 +3,26 @@ import { Fragment } from "react";
 import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { api } from "~/utils/api";
+import { usePostHog } from "posthog-js/react";
 
 export default function ProfileMenu() {
   const { mutateAsync: createBillingPortalSession } =
     api.stripe.createBillingPortalSession.useMutation();
   const { push } = useRouter();
   const { data: session } = useSession();
+  const posthog = usePostHog();
+
+  const openBillingSettings = () => {
+    void createBillingPortalSession().then(({ billingPortalUrl }) => {
+      if (billingPortalUrl) {
+        void push(billingPortalUrl);
+      }
+    });
+
+    posthog?.capture("billing settings opened", {
+      stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus,
+    });
+  };
 
   return (
     <Menu as="div" className="relative inline-block text-left">
@@ -34,15 +48,7 @@ export default function ProfileMenu() {
             <Menu.Item>
               {({ active }) => (
                 <div
-                  onClick={() => {
-                    void createBillingPortalSession().then(
-                      ({ billingPortalUrl }) => {
-                        if (billingPortalUrl) {
-                          void push(billingPortalUrl);
-                        }
-                      }
-                    );
-                  }}
+                  onClick={openBillingSettings}
                   className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
                     active ? "bg-gray-100" : ""
                   }`}