Chore: Payment links tracking (#7769)

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/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx

@@ -19,6 +19,8 @@ import { TableRow } from "./PaymentsTableRow";
 export function RecentPaymentsSection(props: {
   client: ThirdwebClient;
   projectClientId: string;
+  teamSlug: string;
+  projectSlug: string;
   teamId: string;
 }) {
   const { data: payPurchaseData, isLoading } = useQuery<
@@ -95,7 +97,10 @@ export function RecentPaymentsSection(props: {
               className="flex items-center gap-2"
               asChild
             >
-              <Link href="/pay" target="_blank">
+              <Link
+                href={`/team/${props.teamSlug}/${props.projectSlug}/payments/links`}
+                target="_blank"
+              >
                 Create Payment Link
                 <ArrowRightIcon className="size-4" />
               </Link>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx

@@ -45,6 +45,8 @@ export default async function Page(props: {
           client={client}
           projectClientId={project.publishableKey}
           teamId={project.teamId}
+          projectSlug={params.project_slug}
+          teamSlug={params.team_slug}
         />
         <div className="h-12" />
         <QuickStartSection

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}