refactoring pricing buttons, adding tracking events, page viewes

components/elements/CustomButton/index.tsx

@@ -5,64 +5,93 @@ import Link from "next/link";
 import { FC, ReactNode } from "react";
 import styles from "./CustomButton.module.css";
 
-interface CommonButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant: "primary" | "secondary" | "tertiary" | "blackwhite";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "blackwhite";
+
+interface CommonProps {
+  variant: ButtonVariant;
   children: ReactNode;
   invertOnDark?: boolean;
+  className?: string;
 }
 
-interface ButtonProps extends CommonButtonProps {
-  href?: string;
-}
+type AnchorProps = CommonProps &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  };
+
+type NativeButtonProps = CommonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+  };
 
-const CustomButton: FC<ButtonProps> = ({
-  variant = "none",
-  invertOnDark,
-  className,
-  children,
-  href,
-}) => {
-  // Primary and secondary switch for dark mode
+type ButtonProps = AnchorProps | NativeButtonProps;
 
-  const classNames = clsx(
+const getButtonClassNames = (
+  variant: ButtonVariant,
+  invertOnDark?: boolean,
+  className?: string,
+) =>
+  clsx(
     `${styles.button} flex relative items-center gap-2 whitespace-nowrap px-6 py-3`,
-    variant === "primary"
-      ? invertOnDark
+    variant === "primary" &&
+      (invertOnDark
         ? `bg-black text-head dark:bg-[#D8D8D8] dark:text-black dark:hover:bg-gradient-to-r dark:hover:from-[#fc540c] dark:hover:to-[#f5c57a] dark:hover:text-white`
-        : `bg-[#E9E9E9] text-black hover:bg-gradient-to-r hover:from-[#fc540c] hover:to-[#f5c57a] hover:text-white`
-      : "",
-    variant === "secondary"
-      ? `${styles.secondaryButton} ${styles.secondaryButtonShadow} ${styles.secondaryButtonBorderGradient} text-head`
-      : "",
+        : `bg-[#E9E9E9] text-black hover:bg-gradient-to-r hover:from-[#fc540c] hover:to-[#f5c57a] hover:text-white`),
+    variant === "secondary" &&
+      `${styles.secondaryButton} ${styles.secondaryButtonShadow} ${styles.secondaryButtonBorderGradient} text-head`,
     variant === "tertiary" &&
-      "${styles.buttonShadow} ${styles.shadowGradient} text-black",
+      `${styles.buttonShadow} ${styles.shadowGradient} text-black`,
     variant === "blackwhite" &&
-      "border-[1px] border-solid border-[#ffffff40] px-6 py-3 font-gradual text-base text-white hover:bg-gradient-1",
+      "border border-[#ffffff40] px-6 py-3 font-gradual text-base text-white hover:bg-gradient-1",
     className,
   );
 
-  const tertBg = {
-    backgroundImage:
-      "linear-gradient(73deg, #FC540C -7.95%, rgba(255, 215, 111, 0.72) 45.94%, #38D4E9 116.73%",
-  };
+const CustomButton: FC<ButtonProps> = (props) => {
+  const { variant, invertOnDark, className, children, href, ...rest } = props;
 
-  children = (
-    <button className={classNames} style={variant === "tertiary" ? tertBg : {}}>
-      {children}
-    </button>
-  );
+  const classNames = getButtonClassNames(variant, invertOnDark, className);
+  const style =
+    variant === "tertiary"
+      ? {
+          backgroundImage:
+            "linear-gradient(73deg, #FC540C -7.95%, rgba(255, 215, 111, 0.72) 45.94%, #38D4E9 116.73%)",
+        }
+      : undefined;
+
+  if (href) {
+    const anchorProps = rest as React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
-  if (href)
-    if (href.startsWith("/")) children = <Link href={href}>{children}</Link>;
-    else
-      children = (
-        <a href={href} target="_blank" rel="noreferrer">
-          {children}
-        </a>
+    if (href.startsWith("/")) {
+      return (
+        <Link href={href} {...anchorProps}>
+          <button className={classNames} style={style}>
+            {children}
+          </button>
+        </Link>
       );
+    }
+
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className={classNames}
+        style={style}
+        {...anchorProps}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  const buttonProps = rest as React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-  return children;
+  return (
+    <button className={classNames} style={style} {...buttonProps}>
+      {children}
+    </button>
+  );
 };
 
 export default CustomButton;

components/sections/Pricing/PricingCards/PricingButton.tsx

@@ -7,13 +7,15 @@ interface PricingButtonProps {
   variant?: "default" | "highlight";
   collapsed?: boolean;
   href?: string;
+  onClick?: () => void;
 }
 
 export const PricingButton: React.FC<PricingButtonProps> = ({
   text,
   variant = "default",
   collapsed,
   href,
+  onClick,
 }) => {
   return (
     <CustomButton
@@ -23,6 +25,7 @@ export const PricingButton: React.FC<PricingButtonProps> = ({
         "xl:mt-4": collapsed,
         "xl:mt-8": !collapsed,
       })}
+      onClick={onClick}
     >
       {text}
     </CustomButton>

components/sections/Pricing/PricingCards/PricingCard.tsx

@@ -13,6 +13,7 @@ export interface PricingCardProps {
   href: string;
   icon: React.ComponentType<any>;
   collapsed?: boolean;
+  onClick?: () => void;
 }
 
 export const PricingCard: React.FC<PricingCardProps> = ({
@@ -26,6 +27,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   href = "",
   icon,
   collapsed,
+  onClick,
 }) => {
   const featuresListClassName = collapsed ? "xl:max-h-0" : "xl:max-h-[300px]";
 
@@ -71,6 +73,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
           text={buttonText}
           variant={buttonVariant}
           href={href}
+          onClick={onClick}
         />
       </div>
     </article>

components/sections/Pricing/PricingCards/PricingCards.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent } from "lib/posthog";
 import { PricingCard, PricingCardProps } from "./PricingCard";
 import { CheckIcon } from "components/svgs/pricing-icons/CheckIcon";
 import { CONTACT_US_URI, GET_STARTED_URI } from "../../../../lib/constants";
@@ -21,6 +22,9 @@ const pricingTiers: PricingCardProps[] = [
     buttonVariant: "highlight",
     href: GET_STARTED_URI,
     icon: CheckIcon,
+    onClick: () => {
+      trackEvent("pricing_click_tier_community");
+    },
   },
   {
     title: "Pro",
@@ -37,6 +41,9 @@ const pricingTiers: PricingCardProps[] = [
     buttonVariant: "highlight",
     href: GET_STARTED_URI,
     icon: CheckIcon,
+    onClick: () => {
+      trackEvent("pricing_click_tier_pro");
+    },
   },
   {
     title: "Growth",
@@ -52,6 +59,9 @@ const pricingTiers: PricingCardProps[] = [
     buttonText: "Start 14 day trial",
     href: GET_STARTED_URI,
     icon: CheckIcon,
+    onClick: () => {
+      trackEvent("pricing_click_tier_growth");
+    },
   },
   {
     title: "Enterprise",
@@ -68,6 +78,9 @@ const pricingTiers: PricingCardProps[] = [
     buttonVariant: "highlight",
     href: CONTACT_US_URI,
     icon: CheckIcon,
+    onClick: () => {
+      trackEvent("pricing_click_tier_enterprise");
+    },
   },
 ];
 
@@ -102,11 +115,6 @@ const PricingCards = () => {
         ref={ref}
         className="absolute left-0 w-full h-[100px] opacity-0 -z-10 -translate-y-[10px]"
       />
-      {/*<BackgroundShape
-        style={{ transform: "translateY(75px)" }}
-        className="w-full top-auto left-0 hidden lg:block h-[200px]"
-        background="linear-gradient(62.43deg, rgba(252, 84, 12, 0.425) 54.71%, rgba(56, 212, 233, 0.325) 79.8%)"
-      />*/}
       <div className="h-2" />
       <div
         ref={priceSectionsRef}

lib/posthog.ts

@@ -3,3 +3,10 @@ import posthog from "posthog-js";
 export function trackEvent(event: string, properties?: Record<string, any>) {
   posthog.capture(event, properties);
 }
+
+export function TrackUniqueUsers() {
+  posthog.capture("page_view", {
+    path: window.location.pathname,
+    user: posthog.get_distinct_id(),
+  });
+}

pages/pricing.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { NextSeo } from "next-seo";
 import { GetStaticPropsResult } from "next";
 import { QuestionAttrs } from "../components/sections/FrequentlyAskedQuestions";
 import { pricingQuestions } from "../content";
+import { TrackUniqueUsers } from "lib/posthog";
 import { Page } from "components/templates";
 import FeatureList from "components/sections/Pricing/FeatureList";
-import { BackgroundShape } from "../components/BackgroundShape";
 import { ImageSection } from "../components/sections/Pricing/ImageSection";
 import PricingCards from "../components/sections/Pricing/PricingCards/PricingCards";
 import { PricingComparison } from "../components/sections/Pricing/Comparison/PricingComparison";
@@ -28,6 +28,10 @@ interface Props {
 }
 
 export default function PricingPage({ questions }: Props) {
+  useEffect(() => {
+    TrackUniqueUsers();
+  }, []);
+
   return (
     <div className="relative flex-grow bg-center bg-no-repeat px-4 custom-bg overflow-x-clip">
       <NextSeo
@@ -76,11 +80,6 @@ export default function PricingPage({ questions }: Props) {
 
       <div className="relative flex flex-col justify-center custom-bg2 bg-no-repeat sm:min-h-[1050px]">
         <PricingGrid />
-        {/*<BackgroundShape
-          style={{ transform: "none" }}
-          className="w-full h-[200px] top-auto left-0 hidden lg:block"
-          background="linear-gradient(67.02deg, rgba(252, 84, 12, 0.7) 36.9%, rgba(255, 215, 111, 0.7) 63.12%, rgba(56, 212, 233, 0.7) 81.59%)"
-        />*/}
       </div>
 
       <div className="flex flex-col gap-6 max-w-7xl pb-16 m-auto">