add projectId parameter to pay analytics components

Author: jnsdls

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} />
+  );
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/components/webhooks.client.tsx

@@ -60,7 +60,12 @@ type Webhook = {
 };
 
 type PayWebhooksPageProps = {
+  /**
+   *  @deprecated - remove after migration
+   */
   clientId: string;
+  // switching to projectId for lookup, but have to send both during migration
+  projectId: string;
 };
 
 export function PayWebhooksPage(props: PayWebhooksPageProps) {
@@ -71,7 +76,12 @@ 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,
         },
         headers: {
           "Content-Type": "application/json",
@@ -95,7 +105,10 @@ 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}
+        >
           <Button variant="primary" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -109,7 +122,10 @@ 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}
+        >
           <Button size="sm" variant="default" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -149,6 +165,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
                 <TableCell className="text-right">
                   <DeleteWebhookButton
                     clientId={props.clientId}
+                    projectId={props.projectId}
                     webhookId={webhook.id}
                   >
                     <Button variant="ghost" size="icon">
@@ -185,7 +202,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 +336,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",
       });
 

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/page.tsx

@@ -17,5 +17,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  return <PayWebhooksPage clientId={project.publishableKey} />;
+  return (
+    <PayWebhooksPage clientId={project.publishableKey} projectId={project.id} />
+  );
 }

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>

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,

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,

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,

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",

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,

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,