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 ( @@ -34,15 +48,7 @@ export default function ProfileMenu() { {({ active }) => (
{ - 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" : "" }`}