diff --git a/package-lock.json b/package-lock.json index eb83625..e871aa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,8 +34,9 @@ "micro": "^10.0.1", "micro-cors": "^0.1.1", "next": "^13.3.0", - "next-auth": "^4.21.0", + "next-auth": "^4.22.1", "posthog-js": "^1.53.4", + "posthog-node": "^3.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-media-recorder": "^1.6.6", @@ -5349,9 +5350,9 @@ } }, "node_modules/next-auth": { - "version": "4.22.0", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.22.0.tgz", - "integrity": "sha512-08+kjnDoE7aQ52O996x6cwA3ffc2CbHIkrCgLYhbE+aDIJBKI0oA9UbIEIe19/+ODYJgpAHHOtJx4izmsgaVag==", + "version": "4.22.1", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.22.1.tgz", + "integrity": "sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==", "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -5858,6 +5859,26 @@ "rrweb-snapshot": "^1.1.14" } }, + "node_modules/posthog-node": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.0.tgz", + "integrity": "sha512-hXhkDWigzNYgkfLpd3HbfCD0h1/zP19pPXEba2Daf6xCerrFxc7ixMDtXwCQMXOmJNvrcoVMvrjULpfKHN11vA==", + "dependencies": { + "axios": "^0.27.0" + }, + "engines": { + "node": ">=15.0.0" + } + }, + "node_modules/posthog-node/node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, "node_modules/preact": { "version": "10.13.2", "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz", @@ -11126,9 +11147,9 @@ } }, "next-auth": { - "version": "4.22.0", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.22.0.tgz", - "integrity": "sha512-08+kjnDoE7aQ52O996x6cwA3ffc2CbHIkrCgLYhbE+aDIJBKI0oA9UbIEIe19/+ODYJgpAHHOtJx4izmsgaVag==", + "version": "4.22.1", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.22.1.tgz", + "integrity": "sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==", "requires": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -11451,6 +11472,25 @@ "rrweb-snapshot": "^1.1.14" } }, + "posthog-node": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.0.tgz", + "integrity": "sha512-hXhkDWigzNYgkfLpd3HbfCD0h1/zP19pPXEba2Daf6xCerrFxc7ixMDtXwCQMXOmJNvrcoVMvrjULpfKHN11vA==", + "requires": { + "axios": "^0.27.0" + }, + "dependencies": { + "axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "requires": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + } + } + }, "preact": { "version": "10.13.2", "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz", diff --git a/package.json b/package.json index 9067ab7..ddcd95e 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,9 @@ "micro": "^10.0.1", "micro-cors": "^0.1.1", "next": "^13.3.0", - "next-auth": "^4.21.0", + "next-auth": "^4.22.1", "posthog-js": "^1.53.4", + "posthog-node": "^3.1.0", "react": "18.2.0", "react-dom": "18.2.0", "react-media-recorder": "^1.6.6", diff --git a/src/components/NewVideoMenu.tsx b/src/components/NewVideoMenu.tsx index e311f15..f574a3f 100644 --- a/src/components/NewVideoMenu.tsx +++ b/src/components/NewVideoMenu.tsx @@ -5,22 +5,36 @@ import { useAtom } from "jotai"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; import paywallAtom from "~/atoms/paywallAtom"; import { useSession } from "next-auth/react"; +import { usePostHog } from "posthog-js/react"; export default function NewVideoMenu() { const [, setRecordOpen] = useAtom(recordVideoModalOpen); const [, setUploadOpen] = useAtom(uploadVideoModalOpen); const [, setPaywallOpen] = useAtom(paywallAtom); const { data: session } = useSession(); + const posthog = usePostHog(); const openRecordModal = () => { setRecordOpen(true); + + posthog?.capture("open record video modal", { + stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus, + }); }; const openUploadModal = () => { if (session?.user.stripeSubscriptionStatus === "active") { setUploadOpen(true); + + posthog?.capture("open upload video modal", { + stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus, + }); } else { setPaywallOpen(true); + + posthog?.capture("hit video upload paywall", { + stripeSubscriptionStatus: session?.user.stripeSubscriptionStatus, + }); } }; diff --git a/src/components/Paywall.tsx b/src/components/Paywall.tsx index 6c73dc0..3b13e40 100644 --- a/src/components/Paywall.tsx +++ b/src/components/Paywall.tsx @@ -7,6 +7,7 @@ import { api } from "~/utils/api"; import { useRouter } from "next/router"; import { CheckIcon } from "@heroicons/react/20/solid"; import Tooltip from "~/components/Tooltip"; +import { usePostHog } from "posthog-js/react"; export default function Paywall() { const { mutateAsync: createCheckoutSession } = @@ -14,9 +15,12 @@ export default function Paywall() { const router = useRouter(); const [open, setOpen] = useAtom(paywallAtom); const [billedAnnually, setBilledAnnually] = useState(false); + const posthog = usePostHog(); function closeModal() { setOpen(false); + + posthog?.capture("close paywall"); } const handleCheckout = async () => { @@ -26,6 +30,12 @@ export default function Paywall() { } }; + const toggleBillingCycle = () => { + setBilledAnnually(!billedAnnually); + + posthog?.capture("change billing cycle"); + }; + return ( @@ -85,7 +95,7 @@ export default function Paywall() { Monthly