admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

add posthog event to pricing-page billingcycle change

Browse source
This commit is contained in:
MarconLP 2023-05-01 22:45:18 +02:00
parent 6c22a62e2d
commit 99d2c6f4d7
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/pages/pricing.tsx
View file

@ -8,9 +8,17 @@ import { Disclosure, Transition } from "@headlessui/react";
import { ChevronUpIcon } from "@heroicons/react/20/solid"; import { ChevronUpIcon } from "@heroicons/react/20/solid";
import CTA from "~/components/CTA"; import CTA from "~/components/CTA";
import VideoRecordModal from "~/components/VideoRecordModal"; import VideoRecordModal from "~/components/VideoRecordModal";
import { usePostHog } from "posthog-js/react";
export default function Pricing() { export default function Pricing() {
const [billedAnnually, setBilledAnnually] = useState<boolean>(true); const [billedAnnually, setBilledAnnually] = useState<boolean>(true);
const posthog = usePostHog();
const toggleBillingCycle = () => {
setBilledAnnually(!billedAnnually);
posthog?.capture("change billing cycle");
};
return ( 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="z-20 mt-4 flex items-center gap-2 lg:mt-8">
<div <div
className="relative flex w-full rounded-full border border-[#b0b0b0] bg-gray-200/70" className="relative flex w-full rounded-full border border-[#b0b0b0] bg-gray-200/70"
onClick={() => setBilledAnnually(!billedAnnually)} onClick={toggleBillingCycle}
> >
<button <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 ${ 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 ${