Feature: New Payments Overview Page (#7691)

Author: gregfromstl

apps/dashboard/redirects.js

@@ -66,15 +66,20 @@ const projectRoute = "/team/:team_slug/:project_slug";
 
 const projectPageRedirects = [
   {
-    destination: `${projectRoute}/universal-bridge/:path*`,
+    destination: `${projectRoute}/payments/:path*`,
     permanent: false,
     source: `${projectRoute}/connect/pay/:path*`,
   },
   {
-    destination: `${projectRoute}/universal-bridge/:path*`,
+    destination: `${projectRoute}/payments/:path*`,
     permanent: false,
     source: `${projectRoute}/connect/universal-bridge/:path*`,
   },
+  {
+    destination: `${projectRoute}/payments/:path*`,
+    permanent: false,
+    source: `${projectRoute}/universal-bridge/:path*`,
+  },
   {
     destination: `${projectRoute}/account-abstraction/:path*`,
     permanent: false,
@@ -375,12 +380,22 @@ async function redirects() {
       permanent: false,
       source: "/template/:slug",
     },
-    // redirect /connect/pay to /universal-bridge
+    // redirect /connect/pay to /payments
     {
-      destination: "/universal-bridge",
-      permanent: false,
+      destination: "/payments",
+      permanent: true,
       source: "/connect/pay",
     },
+    {
+      destination: "/payments",
+      permanent: true,
+      source: "/universal-bridge",
+    },
+    {
+      destination: "/payments/:slug",
+      permanent: true,
+      source: "/universal-bridge/:slug",
+    },
     // PREVIOUS CAMPAIGNS
     {
       destination: "/",

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

@@ -413,3 +413,18 @@ export function reportUpsellShown(properties: UpsellParams) {
 export function reportUpsellClicked(properties: UpsellParams) {
   posthog.capture("upsell clicked", properties);
 }
+
+// ----------------------------
+// PAYMENTS
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track conversions on payment overview page
+ *
+ * ### Who is responsible for this event?
+ * @samina
+ */
+export function reportPaymentCardClick(properties: { id: string }) {
+  posthog.capture("payment card clicked", properties);
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx

@@ -254,7 +254,7 @@ function ProductsSection(props: { teamSlug: string; projectSlug: string }) {
     {
       description:
         "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing",
-      href: `/team/${props.teamSlug}/${props.projectSlug}/universal-bridge`,
+      href: `/team/${props.teamSlug}/${props.projectSlug}/payments`,
       icon: PayIcon,
       title: "Payments",
     },

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -79,7 +79,7 @@ export function ProjectSidebarLayout(props: {
           group: "Monetize",
           links: [
             {
-              href: `${layoutPath}/universal-bridge`,
+              href: `${layoutPath}/payments`,
               icon: PayIcon,
               label: "Payments",
             },

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/TopChainsTable.tsx

@@ -13,7 +13,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { CardHeading } from "../../universal-bridge/components/common";
+import { CardHeading } from "../../payments/components/common";
 
 export function TopInsightChainsTable(props: {
   data: InsightChainStats[];

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/TopEndpointsTable.tsx

@@ -13,7 +13,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { CardHeading } from "../../universal-bridge/components/common";
+import { CardHeading } from "../../payments/components/common";
 
 export function TopInsightEndpointsTable(props: {
   data: InsightEndpointStats[];

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

@@ -423,7 +423,7 @@ function AppHighlightsCard({
       emptyContent: (
         <EmptyStateContent
           description="Your app hasn't collected any fees yet."
-          link={`/team/${params.team_slug}/${params.project_slug}/connect/universal-bridge/settings`}
+          link={`/team/${params.team_slug}/${params.project_slug}/payments/settings`}
           metric="Fees"
         />
       ),

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/page.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/analytics/page.tsx

@@ -5,8 +5,8 @@ import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/projects";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { loginRedirect } from "@/utils/redirects";
-import { PayAnalytics } from "./components/PayAnalytics";
-import { getUniversalBridgeFiltersFromSearchParams } from "./components/time";
+import { PayAnalytics } from "../components/PayAnalytics";
+import { getUniversalBridgeFiltersFromSearchParams } from "../components/time";
 
 export default async function Page(props: {
   params: Promise<{
@@ -24,9 +24,7 @@ export default async function Page(props: {
   const project = await getProject(params.team_slug, params.project_slug);
 
   if (!authToken) {
-    loginRedirect(
-      `/team/${params.team_slug}/${params.project_slug}/universal-bridge`,
-    );
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/payments`);
   }
 
   if (!project) {
@@ -70,7 +68,7 @@ export default async function Page(props: {
             </div>
             <a
               className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
-              href="https://portal.thirdweb.com/pay"
+              href="https://portal.thirdweb.com/payments"
               rel="noopener noreferrer"
               target="_blank"
             >

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/components/PayEmbedFTUX.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx

@@ -8,7 +8,7 @@ import { TabButtons } from "@/components/ui/tabs";
 
 type Tab = "embed" | "sdk" | "api";
 
-export function PayEmbedFTUX(props: {
+export function BuyWidgetFTUX(props: {
   clientId: string;
   codeExamples: {
     embed: React.ReactNode;
@@ -21,7 +21,7 @@ export function PayEmbedFTUX(props: {
     <div className="rounded-lg border bg-card">
       <div className="border-b border-dashed p-4">
         <h2 className="font-semibold text-lg tracking-tight">
-          Start Monetizing Your App
+          Setup Payments to View Analytics
         </h2>
       </div>
 
@@ -56,7 +56,7 @@ export function PayEmbedFTUX(props: {
           <Button asChild size="sm" variant="outline">
             <Link
               className="gap-2"
-              href="https://portal.thirdweb.com/pay"
+              href="https://portal.thirdweb.com/payments"
               rel="noopener noreferrer"
               target="_blank"
             >

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

@@ -0,0 +1,37 @@
+"use client";
+
+import Link from "next/link";
+import { reportPaymentCardClick } from "@/analytics/report";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+
+export function FeatureCard(props: {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  id: string;
+  link: { href: string; label: string; target?: string };
+}) {
+  return (
+    <Card className="p-4 flex flex-col items-start gap-4">
+      <div className="text-muted-foreground rounded-full border bg-background size-12 flex items-center justify-center">
+        {props.icon}
+      </div>
+      <div className="flex flex-col gap-0.5">
+        <h3 className="font-semibold">{props.title}</h3>
+        <p className="text-muted-foreground text-sm">{props.description}</p>
+      </div>
+      <Button
+        onClick={() => reportPaymentCardClick({ id: props.id })}
+        size="sm"
+        variant="default"
+        className="h-8"
+        asChild
+      >
+        <Link href={props.link.href} target={props.link.target}>
+          {props.link.label}
+        </Link>
+      </Button>
+    </Card>
+  );
+}