add purchases history

src/api/virtual-lab-svc/queries/payment.ts

@@ -4,10 +4,12 @@ import {
   SetupIntentResponse,
   StandalonePaymentRequest,
   StandalonePaymentResponse,
+  SubscriptionPaymentsResponse,
 } from '@/api/virtual-lab-svc/queries/types';
 import { virtualLabApi } from '@/config';
 
 const BASE_URL = `${virtualLabApi.url}/payments`;
+const SUBSCRIPTIONS_URL = `${virtualLabApi.url}/subscriptions`;
 // const BASE_URL = `http://localhost:8000/payments`;
 
 /**
@@ -66,3 +68,41 @@ export async function createStandalonePayment(
   const data = await response.json();
   return data.data;
 }
+
+/**
+ * get subscription payment history with pagination
+ *
+ * @param {Object} params - Pagination parameters
+ * @param {number} [params.page=1] - Page number (1-indexed)
+ * @param {number} [params.pageSize=10] - Number of items per page
+ * @returns {Promise<SubscriptionPaymentsResponse>} - Paginated list of subscription payments
+ * @throws {Error} - Throws an error if the request fails
+ */
+export async function listStandalonePayments({
+  page = 1,
+  pageSize = 5,
+}: {
+  page?: number;
+  pageSize?: number;
+}): Promise<SubscriptionPaymentsResponse> {
+  const session = await getSession();
+
+  // Build the URL with query parameters
+  const url = new URL(`${SUBSCRIPTIONS_URL}/payments`);
+  url.searchParams.append('payment_type', 'standalone');
+  url.searchParams.append('page', page.toString());
+  url.searchParams.append('page_size', pageSize.toString());
+
+  const response = await fetch(url.toString(), {
+    headers: {
+      accept: 'application/json',
+      Authorization: `Bearer ${session?.accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch subscription payments: ${response.status}`);
+  }
+
+  return await response.json();
+}

src/api/virtual-lab-svc/queries/types.ts

@@ -188,14 +188,33 @@ export type SubscriptionPaymentDetails = {
   currency: string;
   status: string;
   payment_date: string;
+  payment_type?: string;
   card_brand: string;
   card_last4: string;
+  card_exp_month?: number;
+  card_exp_year?: number;
   invoice_pdf: string | null;
   receipt_url: string | null;
   period_start: string;
   period_end: string;
+  created_at?: string;
+  updated_at?: string;
+  is_standalone?: boolean;
 };
 
+/**
+ * Response type for paginated subscription payments
+ */
+export type SubscriptionPaymentsResponse = VlmResponse<{
+  total_count: number;
+  total_pages: number;
+  current_page: number;
+  page_size: number;
+  has_next: boolean;
+  has_previous: boolean;
+  payments: SubscriptionPaymentDetails[];
+}>;
+
 export type UserSubscriptionHistory = {
   id: string;
   type: 'free' | 'paid';

src/app/app/virtual-lab/account/profile/page.tsx

@@ -6,6 +6,7 @@ import { getUserProfile } from '@/api/virtual-lab-svc/queries/user';
 import { tryCatch } from '@/api/utils';
 
 export const dynamic = 'force-dynamic';
+
 export async function generateMetadata(): Promise<Metadata> {
   const { data: result, error } = await tryCatch(getUserProfile());
   if (error) {

src/components/VirtualLab/VirtualLabSettingsComponent/index.tsx

@@ -18,6 +18,7 @@ import CreditManagement from './CreditManagement';
 import SpendingsPanel from './Spendings';
 
 import BuyCredits from '@/components/VirtualLab/create-entity-flows/subscription/standalone-credits/buy-credits';
+import PurchasesHistory from '@/components/VirtualLab/VirtualLabSettingsComponent/purchases-history';
 import { deleteVirtualLab } from '@/services/virtual-lab/labs';
 import {
   virtualLabBalanceAtomFamily,
@@ -109,6 +110,7 @@ export default function VirtualLabSettingsComponent({ id }: { id: string }) {
     () => ({
       key: 'purchases',
       label: <CollapsibleLabel text="Purchases" description="View details about your purchases" />,
+      children: <PurchasesHistory />,
     }),
     []
   );
@@ -262,7 +264,7 @@ export default function VirtualLabSettingsComponent({ id }: { id: string }) {
         activeKey={activePanelKey}
         onChange={onChangePanel}
       />
-      <div className="flex w-full justify-end">
+      <div className="mb-4 flex w-full justify-end">
         <BuyCredits />
       </div>
     </div>

src/components/VirtualLab/VirtualLabSettingsComponent/purchases-history.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { InfoCircleFilled } from '@ant-design/icons';
+
+import { Spin } from 'antd';
+import PurchasesTable from '@/components/VirtualLab/VirtualLabSettingsComponent/purchases-table';
+import { HistoryError } from '@/components/VirtualLab/create-entity-flows/subscription/elements';
+import { listStandalonePayments } from '@/api/virtual-lab-svc/queries/payment';
+import { SubscriptionPaymentsResponse } from '@/api/virtual-lab-svc/queries/types';
+import { tryCatch } from '@/api/utils';
+
+function PurchasesEmpty() {
+  return (
+    <div className="mb-6 transform rounded-sm bg-primary-8 p-6 transition-all duration-500 hover:scale-[1.01] hover:shadow-xl">
+      <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+        <div>
+          <h2 className="mb-2 text-2xl font-bold">Purchases History</h2>
+          <p className="max-w-xl text-blue-200/80">No Purchases history found.</p>
+        </div>
+        <div className="mb-2 flex items-center gap-2 self-baseline">
+          <InfoCircleFilled className="text-2xl text-blue-600" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function PurchasesHistory() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(5);
+  const [data, setData] = useState<SubscriptionPaymentsResponse | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchPayments = useCallback(async () => {
+    setIsLoading(true);
+    const { data: result, error: err } = await tryCatch(
+      listStandalonePayments({ page: currentPage, pageSize }),
+      () => {
+        setIsLoading(false);
+      }
+    );
+    if (err) {
+      setError(err);
+    } else {
+      setData(result);
+    }
+  }, [currentPage, pageSize]);
+
+  useEffect(() => {
+    fetchPayments();
+  }, [fetchPayments]);
+
+  const handlePageChange = (page: number, size: number) => {
+    setCurrentPage(page);
+    setPageSize(size);
+  };
+
+  if (error) return <HistoryError />;
+  if (isLoading)
+    return (
+      <div className="flex items-center justify-center">
+        <Spin />
+      </div>
+    );
+
+  if (!data || !data.data || data.data.payments.length === 0) {
+    return <PurchasesEmpty />;
+  }
+
+  const { payments, total_count: totalCount, current_page: currPage, page_size: pSize } = data.data;
+
+  return (
+    <div data-testid="payments-list" className="h-full w-full py-5">
+      <PurchasesTable
+        payments={payments}
+        total={totalCount}
+        currentPage={currPage}
+        pageSize={pSize}
+        onPageChange={handlePageChange}
+        loading={isLoading}
+      />
+    </div>
+  );
+}