task: Use Stripe PaymentIntents API for credit history

Author: tomharmon

web/.env.example

@@ -19,4 +19,8 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJz
 NEXT_PUBLIC_SUPABASE_URL="http://localhost:54321"
 SUPABASE_SERVICE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU"
 SUPABASE_URL="http://localhost:54321"
-NEXT_PUBLIC_BETTER_AUTH="false"
+NEXT_PUBLIC_BETTER_AUTH="false"
+
+# only required for pass through billing development
+STRIPE_CLOUD_GATEWAY_TOKEN_USAGE_PRODUCT="prod_"
+STRIPE_SECRET_KEY=""

web/pages/api/stripe/payment-intents/search.ts

@@ -0,0 +1,76 @@
+import {
+  HandlerWrapperOptions,
+  withAuth,
+} from "../../../../lib/api/handlerWrappers";
+import { stripeServer } from "../../../../utils/stripeServer";
+import { Result } from "@/packages/common/result";
+
+interface StripePaymentIntentsResponse {
+  data: any[];
+  has_more: boolean;
+  next_page: string | null;
+  count: number;
+}
+
+async function handler({
+  req,
+  res,
+  userData: { orgId },
+}: HandlerWrapperOptions<Result<StripePaymentIntentsResponse, string>>) {
+  if (req.method !== "GET") {
+    return res.status(405).json({
+      error: "Method not allowed",
+      data: null,
+    });
+  }
+
+  try {
+    const { limit = "10", page } = req.query;
+    const productId = process.env.STRIPE_CLOUD_GATEWAY_TOKEN_USAGE_PRODUCT;
+
+    if (!productId) {
+      console.error(
+        "[Stripe API] STRIPE_CLOUD_GATEWAY_TOKEN_USAGE_PRODUCT not configured",
+      );
+      return res.status(500).json({
+        error: "Stripe product ID not configured",
+        data: null,
+      });
+    }
+
+    // Include orgId in the metadata query
+    const query = `metadata['productId']:'${productId}' AND metadata['orgId']:'${orgId}'`;
+
+    // Search payment intents using Stripe API
+    const searchParams: any = {
+      query,
+      limit: parseInt(limit as string, 10),
+    };
+
+    // Add page parameter if provided (Stripe uses page token for search pagination)
+    if (page) {
+      searchParams.page = page as string;
+    }
+
+    const paymentIntents =
+      await stripeServer.paymentIntents.search(searchParams);
+
+    return res.status(200).json({
+      error: null,
+      data: {
+        data: paymentIntents.data,
+        has_more: paymentIntents.has_more,
+        next_page: paymentIntents.next_page || null,
+        count: paymentIntents.data.length,
+      },
+    });
+  } catch (error: any) {
+    console.error("Error searching payment intents:", error);
+    return res.status(500).json({
+      error: "Failed to search payment intents",
+      data: null,
+    });
+  }
+}
+
+export default withAuth(handler);

web/pages/credits.tsx

@@ -18,7 +18,15 @@ import {
   type PurchasedCredits,
 } from "@/services/hooks/useCredits";
 import { formatDate } from "@/utils/date";
-import { ChevronLeft, ChevronRight, RefreshCcw } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  RefreshCcw,
+  AlertCircle,
+  Clock,
+  CheckCircle,
+  XCircle,
+} from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
 import { ReactElement, useState } from "react";
@@ -28,7 +36,8 @@ import { useFeatureFlag } from "@/services/hooks/admin";
 import { FeatureWaitlist } from "@/components/templates/waitlist/FeatureWaitlist";
 
 const Credits: NextPageWithLayout<void> = () => {
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPageToken, setCurrentPageToken] = useState<string | null>(null);
+  const [pageTokenHistory, setPageTokenHistory] = useState<string[]>([]);
   const [pageSize, setPageSize] = useState(5);
   const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
 
@@ -49,15 +58,14 @@ const Credits: NextPageWithLayout<void> = () => {
     refetch: refetchTransactions,
     error: transactionsError,
   } = useCreditTransactions({
-    page: currentPage,
-    pageSize: pageSize,
+    limit: pageSize,
+    page: currentPageToken,
   });
 
   const transactions = transactionsData?.purchases || [];
-  const totalTransactions = transactionsData?.total || 0;
-  const totalPages = Math.ceil(totalTransactions / pageSize);
-  const hasMore = currentPage < totalPages - 1;
-  const hasPrevious = currentPage > 0;
+  const hasMore = transactionsData?.hasMore || false;
+  const hasPrevious = pageTokenHistory.length > 0;
+  const currentPageNumber = pageTokenHistory.length + 1;
 
   const hasAccess = hasCreditsFeatureFlag?.data;
 
@@ -330,7 +338,8 @@ const Credits: NextPageWithLayout<void> = () => {
                         onValueChange={(value) => {
                           setPageSize(Number(value));
                           // Reset pagination when changing page size
-                          setCurrentPage(0);
+                          setCurrentPageToken(null);
+                          setPageTokenHistory([]);
                         }}
                       >
                         <SelectTrigger className="h-8 w-[60px]">
@@ -367,41 +376,98 @@ const Credits: NextPageWithLayout<void> = () => {
                               const created = new Date(transaction.createdAt);
                               const createdStr = created.toISOString();
 
-                              // All transactions are credit purchases for now
-                              const description = "Credit purchase";
-                              const isCredit = true; // All are credits being added
+                              // Get status from transaction
+                              const status = transaction.status;
+
+                              // Determine status display properties
+                              const getStatusDisplay = () => {
+                                switch (status) {
+                                  case "succeeded":
+                                    return {
+                                      label: "Completed",
+                                      icon: CheckCircle,
+                                      className:
+                                        "text-green-600 dark:text-green-500",
+                                      showAmount: true,
+                                    };
+                                  case "processing":
+                                    return {
+                                      label: "Processing",
+                                      icon: Clock,
+                                      className:
+                                        "text-blue-600 dark:text-blue-500",
+                                      showAmount: true,
+                                    };
+                                  case "canceled":
+                                    return {
+                                      label: "Canceled",
+                                      icon: XCircle,
+                                      className: "text-muted-foreground",
+                                      showAmount: false,
+                                    };
+                                  case "requires_action":
+                                  case "requires_capture":
+                                  case "requires_confirmation":
+                                  case "requires_payment_method":
+                                    return {
+                                      label: "Action Required",
+                                      icon: AlertCircle,
+                                      className:
+                                        "text-amber-600 dark:text-amber-500",
+                                      showAmount: true,
+                                    };
+                                  default:
+                                    return {
+                                      label: "Credit purchase",
+                                      icon: CheckCircle,
+                                      className:
+                                        "text-green-600 dark:text-green-500",
+                                      showAmount: true,
+                                    };
+                                }
+                              };
+
+                              const statusDisplay = getStatusDisplay();
+                              const StatusIcon = statusDisplay.icon;
 
                               return (
                                 <div
                                   key={transaction.id || index}
                                   className="flex items-center justify-between border-b border-border py-4 last:border-b-0"
                                 >
-                                  <div className="flex flex-col gap-1">
+                                  <div className="flex items-start gap-3">
+                                    <StatusIcon
+                                      className={`mt-0.5 h-4 w-4 ${statusDisplay.className}`}
+                                    />
+                                    <div className="flex flex-col gap-1">
+                                      <div
+                                        className="text-sm"
+                                        title={created.toLocaleString("en-US", {
+                                          month: "short",
+                                          day: "numeric",
+                                          year: "numeric",
+                                          hour: "2-digit",
+                                          minute: "2-digit",
+                                        })}
+                                      >
+                                        {formatDate(createdStr)}
+                                      </div>
+                                      <XSmall className="text-muted-foreground">
+                                        {statusDisplay.label}
+                                      </XSmall>
+                                    </div>
+                                  </div>
+                                  {statusDisplay.showAmount && (
                                     <div
-                                      className="text-sm"
-                                      title={created.toLocaleString("en-US", {
-                                        month: "short",
-                                        day: "numeric",
-                                        year: "numeric",
-                                        hour: "2-digit",
-                                        minute: "2-digit",
-                                      })}
+                                      className={`text-sm font-medium ${statusDisplay.className}`}
                                     >
-                                      {formatDate(createdStr)}
+                                      {status === "succeeded" ? "+" : ""}
+                                      {(amount / 100).toLocaleString("en-US", {
+                                        style: "currency",
+                                        currency: "usd",
+                                      })}
                                     </div>
-                                    <XSmall className="text-muted-foreground">
-                                      {description}
-                                    </XSmall>
-                                  </div>
-                                  <div
-                                    className={`text-sm font-medium ${isCredit ? "text-green-600 dark:text-green-500" : "text-muted-foreground"}`}
-                                  >
-                                    {isCredit ? "+" : "-"}
-                                    {(amount / 100).toLocaleString("en-US", {
-                                      style: "currency",
-                                      currency: "usd",
-                                    })}
-                                  </div>
+                                  )}
                                 </div>
                               );
                             },
@@ -423,23 +489,34 @@ const Credits: NextPageWithLayout<void> = () => {
                           onClick={() => {
                             // Go to previous page
                             if (hasPrevious) {
-                              setCurrentPage(currentPage - 1);
+                              const newHistory = [...pageTokenHistory];
+                              newHistory.pop();
+                              const previousToken =
+                                newHistory.length > 0
+                                  ? newHistory[newHistory.length - 1]
+                                  : null;
+                              setPageTokenHistory(newHistory);
+                              setCurrentPageToken(previousToken);
                             }
                           }}
                           disabled={!hasPrevious}
                         >
                           <ChevronLeft className="h-3 w-3" />
                         </Button>
                         <Badge variant="secondary" className="text-xs">
-                          Page {currentPage + 1} of {totalPages || 1}
+                          Page {currentPageNumber}
                         </Badge>
                         <Button
                           variant="ghost"
                           size="sm"
                           onClick={() => {
                             // Go to next page
-                            if (hasMore) {
-                              setCurrentPage(currentPage + 1);
+                            if (hasMore && transactionsData?.nextPage) {
+                              setPageTokenHistory([
+                                ...pageTokenHistory,
+                                currentPageToken || "",
+                              ]);
+                              setCurrentPageToken(transactionsData.nextPage);
                             }
                           }}
                           disabled={!hasMore}