add projectId parameter to pay analytics components

jnsdls · jnsdls · commit 5694742ddc95 · 2025-02-12T17:17: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,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  return <PayAnalytics clientId={project.publishableKey} />;
+  return (
+    <PayAnalytics clientId={project.publishableKey} projectId={project.id} />
+  );
 }
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx b/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx
@@ -14,8 +14,16 @@ 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;
+}) {
   const clientId = props.clientId;
+  const projectId = props.projectId;
   const [range, setRange] = useState<Range>(() =>
     getLastNDaysRange("last-120"),
   );
@@ -34,12 +42,14 @@ 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}
               from={range.from}
               to={range.to}
             />
           </div>
           <TotalPayVolume
             clientId={clientId}
+            projectId={projectId}
             from={range.from}
             to={range.to}
             numberOfDays={numberOfDays}
@@ -50,6 +60,7 @@ export function PayAnalytics(props: { clientId: string }) {
           <CardContainer>
             <Payouts
               clientId={clientId}
+              projectId={projectId}
               from={range.from}
               to={range.to}
               numberOfDays={numberOfDays}
@@ -58,6 +69,7 @@ export function PayAnalytics(props: { clientId: string }) {
           <CardContainer>
             <PaymentsSuccessRate
               clientId={clientId}
+              projectId={projectId}
               from={range.from}
               to={range.to}
             />
@@ -68,20 +80,27 @@ 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}
               from={range.from}
               to={range.to}
               numberOfDays={numberOfDays}
             />
           </div>
           <PayCustomersTable
             clientId={clientId}
+            projectId={projectId}
             from={range.from}
             to={range.to}
           />
         </GridWithSeparator>
 
         <CardContainer>
-          <PaymentHistory clientId={clientId} from={range.from} to={range.to} />
+          <PaymentHistory
+            clientId={clientId}
+            projectId={projectId}
+            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,12 @@ 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;
   from: Date;
   to: Date;
 }) {
@@ -80,7 +85,12 @@ 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,
     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,12 @@ 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;
   from: Date;
   to: Date;
   numberOfDays: number;
@@ -86,7 +91,12 @@ 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,
       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,24 @@ 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;
   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,
     from: props.from,
     to: props.to,
     start: (page - 1) * pageSize,
@@ -88,7 +98,12 @@ 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,
                 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,25 @@ 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;
   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,
       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,12 @@ 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;
   from: Date;
   to: Date;
   numberOfDays: number;
@@ -82,7 +87,12 @@ 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,
       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,12 @@ 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;
   from: Date;
   to: Date;
   numberOfDays: number;
@@ -71,7 +76,12 @@ 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,
       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
@@ -58,13 +58,23 @@ function processQuery(
 }
 
 export function TotalVolumePieChart(props: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
   from: Date;
   to: Date;
 }) {
   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,
       from: props.from,
       intervalType: "day",
       to: props.to,
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayCustomers.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayCustomers.ts
@@ -17,7 +17,12 @@ type Response = {
 };
 
 export function usePayCustomers(options: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
   from: Date;
   to: Date;
   pageSize: number;
@@ -40,7 +45,12 @@ export function usePayCustomers(options: {
         searchParams: {
           skip: `${start}`,
           take: `${options.pageSize}`,
+          /**
+           *  @deprecated - remove after migration
+           */
           clientId: options.clientId,
+          // switching to projectId for lookup, but have to send both during migration
+          projectId: options.projectId,
           fromDate: `${options.from.getTime()}`,
           toDate: `${options.to.getTime()}`,
         },
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayNewCustomers.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayNewCustomers.ts
@@ -25,7 +25,12 @@ type Response = {
 };
 
 export function usePayNewCustomers(options: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
   from: Date;
   to: Date;
   intervalType: "day" | "week";
@@ -38,7 +43,12 @@ export function usePayNewCustomers(options: {
         pathname: "/stats/aggregate/customers/v1",
         searchParams: {
           intervalType: options.intervalType,
+          /**
+           *  @deprecated - remove after migration
+           */
           clientId: options.clientId,
+          // switching to projectId for lookup, but have to send both during migration
+          projectId: options.projectId,
           fromDate: `${options.from.getTime()}`,
           toDate: `${options.to.getTime()}`,
         },
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayPurchases.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayPurchases.ts
@@ -54,7 +54,12 @@ type Response = {
 };
 
 type PayPurchaseOptions = {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
   from: Date;
   to: Date;
   start: number;
@@ -77,7 +82,12 @@ export async function getPayPurchases(options: PayPurchaseOptions) {
     searchParams: {
       skip: `${options.start}`,
       take: `${options.count}`,
+      /**
+       *  @deprecated - remove after migration
+       */
       clientId: options.clientId,
+      // switching to projectId for lookup, but have to send both during migration
+      projectId: options.projectId,
       fromDate: `${options.from.getTime()}`,
       toDate: `${options.to.getTime()}`,
     },
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayVolume.ts b/apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayVolume.ts
@@ -56,7 +56,12 @@ type Response = {
 };
 
 export function usePayVolume(options: {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
   from: Date;
   to: Date;
   intervalType: "day" | "week";
@@ -69,7 +74,12 @@ export function usePayVolume(options: {
         pathname: "/stats/aggregate/volume/v1",
         searchParams: {
           intervalType: options.intervalType,
+          /**
+           *  @deprecated - remove after migration
+           */
           clientId: options.clientId,
+          // switching to projectId for lookup, but have to send both during migration
+          projectId: options.projectId,
           fromDate: `${options.from.getTime()}`,
           toDate: `${options.to.getTime()}`,
         },

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