chore: adds payment link tracking

Author: gregfromstl

apps/dashboard/src/@/analytics/report.ts

@@ -428,3 +428,31 @@ export function reportUpsellClicked(properties: UpsellParams) {
 export function reportPaymentCardClick(properties: { id: string }) {
   posthog.capture("payment card clicked", properties);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track payment link usage
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkVisited(properties: {
+  linkId: string;
+  clientId: string;
+}) {
+  posthog.capture("payment link visited", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track payment link usage
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkCompleted(properties: {
+  linkId: string;
+  clientId: string;
+}) {
+  posthog.capture("payment link completed", properties);
+}

apps/dashboard/src/app/pay/[id]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
+import { reportPaymentLinkVisited } from "@/analytics/report";
 import { getPaymentLink } from "@/api/universal-bridge/links";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { PayPageWidget } from "../components/client/PayPageWidget.client";
@@ -32,6 +33,11 @@ export default async function PayPage({
     paymentId: id,
   });
 
+  reportPaymentLinkVisited({
+    linkId: id,
+    clientId: paymentLink.clientId,
+  });
+
   const tokenContract = getContract({
     address: paymentLink.destinationToken.address, // for this RPC call, use the dashboard client
     // eslint-disable-next-line no-restricted-syntax

apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { createThirdwebClient, NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
 import { AutoConnect, CheckoutWidget } from "thirdweb/react";
 import { checksumAddress } from "thirdweb/utils";
+import { reportPaymentLinkCompleted } from "@/analytics/report";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 
 export function PayPageWidget({
@@ -60,6 +61,12 @@ export function PayPageWidget({
         onSuccess={() => {
           if (!redirectUri) return;
           const url = new URL(redirectUri);
+          if (paymentLinkId && clientId) {
+            reportPaymentLinkCompleted({
+              linkId: paymentLinkId,
+              clientId: clientId,
+            });
+          }
           return window.open(url.toString());
         }}
         paymentLinkId={paymentLinkId}