add projectId parameter to pay analytics components (#6245)

jnsdls · web-flow · commit b7158c2b54df · 2025-02-12T21:54:34.000-08:00
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/page.tsx
@@ -17,5 +17,11 @@ export default async function Page(props: {
     notFound();
   }
 
-  return <PayAnalytics clientId={project.publishableKey} />;
+  return (
+    <PayAnalytics
+      clientId={project.publishableKey}
+      projectId={project.id}
+      teamId={project.teamId}
+    />
+  );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/components/webhooks.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/components/webhooks.client.tsx
@@ -60,7 +60,13 @@ type Webhook = {
 };
 
 type PayWebhooksPageProps = {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
 };
 
 export function PayWebhooksPage(props: PayWebhooksPageProps) {
@@ -71,7 +77,13 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
         method: "GET",
         pathname: "/webhooks/get-all",
         searchParams: {
+          /**
+           *  @deprecated - remove after migration
+           */
           clientId: props.clientId,
+          // switching to projectId for lookup, but have to send both during migration
+          projectId: props.projectId,
+          teamId: props.teamId,
         },
         headers: {
           "Content-Type": "application/json",
@@ -95,7 +107,11 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
     return (
       <div className="flex flex-col items-center gap-8 rounded-lg border border-border p-8 text-center">
         <h2 className="font-semibold text-xl">No webhooks configured yet.</h2>
-        <CreateWebhookButton clientId={props.clientId}>
+        <CreateWebhookButton
+          clientId={props.clientId}
+          projectId={props.projectId}
+          teamId={props.teamId}
+        >
           <Button variant="primary" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -109,7 +125,11 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
     <div>
       <div className="flex items-center justify-between">
         <h2 className="font-semibold text-xl tracking-tight">Webhooks</h2>
-        <CreateWebhookButton clientId={props.clientId}>
+        <CreateWebhookButton
+          clientId={props.clientId}
+          projectId={props.projectId}
+          teamId={props.teamId}
+        >
           <Button size="sm" variant="default" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -149,7 +169,9 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
                 <TableCell className="text-right">
                   <DeleteWebhookButton
                     clientId={props.clientId}
+                    projectId={props.projectId}
                     webhookId={webhook.id}
+                    teamId={props.teamId}
                   >
                     <Button variant="ghost" size="icon">
                       <TrashIcon className="size-5" strokeWidth={1} />
@@ -185,7 +207,15 @@ function CreateWebhookButton(props: PropsWithChildren<PayWebhooksPageProps>) {
       const res = await payServerProxy({
         method: "POST",
         pathname: "/webhooks/create",
-        body: JSON.stringify({ ...values, clientId: props.clientId }),
+        body: JSON.stringify({
+          ...values,
+          /**
+           *  @deprecated - remove after migration
+           */
+          clientId: props.clientId,
+          // switching to projectId for lookup, but have to send both during migration
+          projectId: props.projectId,
+        }),
         headers: {
           "Content-Type": "application/json",
         },
@@ -311,7 +341,15 @@ function DeleteWebhookButton(
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ id, clientId: props.clientId }),
+        body: JSON.stringify({
+          id,
+          /**
+           *  @deprecated - remove after migration
+           */
+          clientId: props.clientId,
+          // switching to projectId for lookup, but have to send both during migration
+          projectId: props.projectId,
+        }),
         pathname: "/webhooks/revoke",
       });
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/page.tsx
@@ -17,5 +17,11 @@ export default async function Page(props: {
     notFound();
   }
 
-  return <PayWebhooksPage clientId={project.publishableKey} />;
+  return (
+    <PayWebhooksPage
+      clientId={project.publishableKey}
+      projectId={project.id}
+      teamId={project.teamId}
+    />
+  );
 }
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx b/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx
@@ -14,8 +14,18 @@ import { Payouts } from "./components/Payouts";
 import { TotalPayVolume } from "./components/TotalPayVolume";
 import { TotalVolumePieChart } from "./components/TotalVolumePieChart";
 
-export function PayAnalytics(props: { clientId: string }) {
+export function PayAnalytics(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
+  clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
+}) {
   const clientId = props.clientId;
+  const projectId = props.projectId;
+  const teamId = props.teamId;
   const [range, setRange] = useState<Range>(() =>
     getLastNDaysRange("last-120"),
   );
@@ -34,12 +44,16 @@ export function PayAnalytics(props: { clientId: string }) {
           <div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
             <TotalVolumePieChart
               clientId={clientId}
+              projectId={projectId}
+              teamId={teamId}
               from={range.from}
               to={range.to}
             />
           </div>
           <TotalPayVolume
             clientId={clientId}
+            projectId={projectId}
+            teamId={teamId}
             from={range.from}
             to={range.to}
             numberOfDays={numberOfDays}
@@ -50,6 +64,8 @@ export function PayAnalytics(props: { clientId: string }) {
           <CardContainer>
             <Payouts
               clientId={clientId}
+              projectId={projectId}
+              teamId={teamId}
               from={range.from}
               to={range.to}
               numberOfDays={numberOfDays}
@@ -58,6 +74,8 @@ export function PayAnalytics(props: { clientId: string }) {
           <CardContainer>
             <PaymentsSuccessRate
               clientId={clientId}
+              projectId={projectId}
+              teamId={teamId}
               from={range.from}
               to={range.to}
             />
@@ -68,20 +86,30 @@ export function PayAnalytics(props: { clientId: string }) {
           <div className="border-border border-b pb-6 xl:border-none xl:pb-0">
             <PayNewCustomers
               clientId={clientId}
+              projectId={projectId}
+              teamId={teamId}
               from={range.from}
               to={range.to}
               numberOfDays={numberOfDays}
             />
           </div>
           <PayCustomersTable
             clientId={clientId}
+            projectId={projectId}
+            teamId={teamId}
             from={range.from}
             to={range.to}
           />
         </GridWithSeparator>
 
         <CardContainer>
-          <PaymentHistory clientId={clientId} from={range.from} to={range.to} />
+          <PaymentHistory
+            clientId={clientId}
+            projectId={projectId}
+            teamId={teamId}
+            from={range.from}
+            to={range.to}
+          />
         </CardContainer>
       </div>
     </div>
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx
@@ -71,7 +71,13 @@ function processQuery(
 }
 
 export function PayCustomersTable(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
   from: Date;
   to: Date;
 }) {
@@ -80,7 +86,13 @@ export function PayCustomersTable(props: {
   );
 
   const topCustomersQuery = usePayCustomers({
+    /**
+     *  @deprecated - remove after migration
+     */
     clientId: props.clientId,
+    // switching to projectId for lookup, but have to send both during migration
+    projectId: props.projectId,
+    teamId: props.teamId,
     from: props.from,
     to: props.to,
     pageSize: 100,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
@@ -69,7 +69,13 @@ function processQuery(
 }
 
 export function PayNewCustomers(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
   from: Date;
   to: Date;
   numberOfDays: number;
@@ -86,7 +92,13 @@ export function PayNewCustomers(props: {
 
   const uiQuery = processQuery(
     usePayNewCustomers({
+      /**
+       *  @deprecated - remove after migration
+       */
       clientId: props.clientId,
+      // switching to projectId for lookup, but have to send both during migration
+      projectId: props.projectId,
+      teamId: props.teamId,
       from: props.from,
       to: props.to,
       intervalType,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
@@ -63,14 +63,26 @@ function processQuery(
 }
 
 export function PaymentHistory(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
   from: Date;
   to: Date;
 }) {
   const [page, setPage] = useState(1);
 
   const purchasesQuery = usePayPurchases({
+    /**
+     *  @deprecated - remove after migration
+     */
     clientId: props.clientId,
+    // switching to projectId for lookup, but have to send both during migration
+    projectId: props.projectId,
+    teamId: props.teamId,
     from: props.from,
     to: props.to,
     start: (page - 1) * pageSize,
@@ -88,7 +100,13 @@ export function PaymentHistory(props: {
             fileName="transaction_history"
             getData={async () => {
               const purchaseData = await getPayPurchases({
+                /**
+                 *  @deprecated - remove after migration
+                 */
                 clientId: props.clientId,
+                // switching to projectId for lookup, but have to send both during migration
+                projectId: props.projectId,
+                teamId: props.teamId,
                 count: 10000,
                 from: props.from,
                 start: 0,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx
@@ -89,15 +89,27 @@ function processQuery(
 }
 
 export function PaymentsSuccessRate(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
   from: Date;
   to: Date;
 }) {
   const [type, setType] = useState<PayVolumeType>("all");
 
   const uiQuery = processQuery(
     usePayVolume({
+      /**
+       *  @deprecated - remove after migration
+       */
       clientId: props.clientId,
+      // switching to projectId for lookup, but have to send both during migration
+      projectId: props.projectId,
+      teamId: props.teamId,
       from: props.from,
       to: props.to,
       intervalType: "day",
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
@@ -65,7 +65,13 @@ function processQuery(query: ReturnType<typeof usePayVolume>): ProcessedQuery {
 }
 
 export function Payouts(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
   from: Date;
   to: Date;
   numberOfDays: number;
@@ -82,7 +88,13 @@ export function Payouts(props: {
 
   const uiQuery = processQuery(
     usePayVolume({
+      /**
+       *  @deprecated - remove after migration
+       */
       clientId: props.clientId,
+      // switching to projectId for lookup, but have to send both during migration
+      projectId: props.projectId,
+      teamId: props.teamId,
       from: props.from,
       to: props.to,
       intervalType,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
@@ -54,7 +54,13 @@ function processQuery(
 }
 
 export function TotalPayVolume(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
+  teamId: string;
   from: Date;
   to: Date;
   numberOfDays: number;
@@ -71,7 +77,13 @@ export function TotalPayVolume(props: {
 
   const volumeQuery = processQuery(
     usePayVolume({
+      /**
+       *  @deprecated - remove after migration
+       */
       clientId: props.clientId,
+      // switching to projectId for lookup, but have to send both during migration
+      projectId: props.projectId,
+      teamId: props.teamId,
       from: props.from,
       intervalType,
       to: props.to,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayCustomers.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayCustomers.ts
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayNewCustomers.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayNewCustomers.ts
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayPurchases.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayPurchases.ts
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayVolume.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayVolume.ts

Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,11 @@ export default async function Page(props: {`
`17`	`17`	`notFound();`
`18`	`18`	`}`
`19`	`19`
`20`		`- return <PayAnalytics clientId={project.publishableKey} />;`
	`20`	`+ return (`
	`21`	`+ <PayAnalytics`
	`22`	`+ clientId={project.publishableKey}`
	`23`	`+ projectId={project.id}`
	`24`	`+ teamId={project.teamId}`
	`25`	`+ />`
	`26`	`+ );`
`21`	`27`	`}`