From 99d2c6f4d740494e49bfef7db9a458ed931f74c7 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Mon, 1 May 2023 22:45:18 +0200
Subject: [PATCH] add posthog event to pricing-page billingcycle change

---
 src/pages/pricing.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index 607e5ae..c7089ff 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -8,9 +8,17 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import CTA from "~/components/CTA";
 import VideoRecordModal from "~/components/VideoRecordModal";
+import { usePostHog } from "posthog-js/react";
 
 export default function Pricing() {
   const [billedAnnually, setBilledAnnually] = useState<boolean>(true);
+  const posthog = usePostHog();
+
+  const toggleBillingCycle = () => {
+    setBilledAnnually(!billedAnnually);
+
+    posthog?.capture("change billing cycle");
+  };
 
   return (
     <>
@@ -30,7 +38,7 @@ export default function Pricing() {
         <div className="z-20 mt-4 flex items-center gap-2 lg:mt-8">
           <div
             className="relative flex w-full rounded-full border border-[#b0b0b0] bg-gray-200/70"
-            onClick={() => setBilledAnnually(!billedAnnually)}
+            onClick={toggleBillingCycle}
           >
             <button
               className={`rounded-full border border-gray-200 px-4 py-2 text-sm font-medium text-gray-900 shadow-sm transition focus:z-10 focus:outline-none focus:ring-0 sm:w-auto ${