From 90757475ac30f971c35399552027b842eb7078fe Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Mon, 18 Aug 2025 00:29:56 +0800
Subject: [PATCH] refactor: implement credits page with balance and
 transactions tabs

---
 messages/en.json                              |  4 ++
 messages/zh.json                              |  4 ++
 src/actions/create-credit-checkout-session.ts |  4 +-
 .../(protected)/settings/billing/page.tsx     |  3 ++
 .../(protected)/settings/credits/page.tsx     | 33 +-------------
 .../settings/credits/credit-packages.tsx      |  1 -
 ...tions-page.tsx => credit-transactions.tsx} |  5 ++-
 .../credits-balance-card.tsx                  |  3 ++
 .../settings/credits/credits-page-client.tsx  | 44 +++++++++++++++++++
 9 files changed, 66 insertions(+), 35 deletions(-)
 rename src/components/settings/credits/{credit-transactions-page.tsx => credit-transactions.tsx} (96%)
 rename src/components/settings/{billing => credits}/credits-balance-card.tsx (99%)
 create mode 100644 src/components/settings/credits/credits-page-client.tsx

diff --git a/messages/en.json b/messages/en.json
index 8f351a9..84fde26 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -588,6 +588,10 @@
       "credits": {
         "title": "Credits",
         "description": "Manage your credit transactions",
+        "tabs": {
+          "balance": "Balance",
+          "transactions": "Transactions"
+        },
         "balance": {
           "title": "Credit Balance",
           "description": "Your credit balance",
diff --git a/messages/zh.json b/messages/zh.json
index c0e3157..9120f0f 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -588,6 +588,10 @@
       "credits": {
         "title": "积分",
         "description": "管理您的积分交易",
+        "tabs": {
+          "balance": "积分余额",
+          "transactions": "交易记录"
+        },
         "balance": {
           "title": "积分余额",
           "description": "您的积分余额",
diff --git a/src/actions/create-credit-checkout-session.ts b/src/actions/create-credit-checkout-session.ts
index 218eb59..7e12532 100644
--- a/src/actions/create-credit-checkout-session.ts
+++ b/src/actions/create-credit-checkout-session.ts
@@ -65,10 +65,10 @@ export const createCreditCheckoutSession = userActionClient
 
       // Create checkout session with credit-specific URLs
       const successUrl = getUrlWithLocale(
-        `${Routes.SettingsBilling}?credits_session_id={CHECKOUT_SESSION_ID}`,
+        `${Routes.SettingsCredits}?credits_session_id={CHECKOUT_SESSION_ID}`,
         locale
       );
-      const cancelUrl = getUrlWithLocale(Routes.SettingsBilling, locale);
+      const cancelUrl = getUrlWithLocale(Routes.SettingsCredits, locale);
 
       const params: CreateCreditCheckoutParams = {
         packageId,
diff --git a/src/app/[locale]/(protected)/settings/billing/page.tsx b/src/app/[locale]/(protected)/settings/billing/page.tsx
index 2a6a07e..38e4b5d 100644
--- a/src/app/[locale]/(protected)/settings/billing/page.tsx
+++ b/src/app/[locale]/(protected)/settings/billing/page.tsx
@@ -1,5 +1,8 @@
 import BillingCard from '@/components/settings/billing/billing-card';
 
+/**
+ * Billing page, show billing information
+ */
 export default function BillingPage() {
   return (
     <div className="flex flex-col gap-8">
diff --git a/src/app/[locale]/(protected)/settings/credits/page.tsx b/src/app/[locale]/(protected)/settings/credits/page.tsx
index 78b33ff..2f0bae7 100644
--- a/src/app/[locale]/(protected)/settings/credits/page.tsx
+++ b/src/app/[locale]/(protected)/settings/credits/page.tsx
@@ -1,7 +1,4 @@
-import CreditsBalanceCard from '@/components/settings/billing/credits-balance-card';
-import { CreditPackages } from '@/components/settings/credits/credit-packages';
-import { CreditTransactionsPageClient } from '@/components/settings/credits/credit-transactions-page';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import CreditsPageClient from '@/components/settings/credits/credits-page-client';
 import { websiteConfig } from '@/config/website';
 import { Routes } from '@/routes';
 import { redirect } from 'next/navigation';
@@ -15,31 +12,5 @@ export default function CreditsPage() {
     redirect(Routes.SettingsBilling);
   }
 
-  return (
-    <div className="flex flex-col gap-8">
-      <Tabs defaultValue="balance" className="w-full">
-        <TabsList className="">
-          <TabsTrigger value="balance">Balance</TabsTrigger>
-          <TabsTrigger value="transactions">Transactions</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="balance" className="mt-2 flex flex-col gap-4">
-          {/* Credits Balance Card */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <CreditsBalanceCard />
-          </div>
-
-          {/* Credit Packages */}
-          <div className="w-full">
-            <CreditPackages />
-          </div>
-        </TabsContent>
-
-        <TabsContent value="transactions" className="mt-2">
-          {/* Credit Transactions */}
-          <CreditTransactionsPageClient />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
+  return <CreditsPageClient />;
 }
diff --git a/src/components/settings/credits/credit-packages.tsx b/src/components/settings/credits/credit-packages.tsx
index 2e93b54..639556d 100644
--- a/src/components/settings/credits/credit-packages.tsx
+++ b/src/components/settings/credits/credit-packages.tsx
@@ -20,7 +20,6 @@ import { CreditCheckoutButton } from './credit-checkout-button';
 
 /**
  * Credit packages component
- * @returns Credit packages component
  */
 export function CreditPackages() {
   // Check if credits are enabled - move this check before any hooks
diff --git a/src/components/settings/credits/credit-transactions-page.tsx b/src/components/settings/credits/credit-transactions.tsx
similarity index 96%
rename from src/components/settings/credits/credit-transactions-page.tsx
rename to src/components/settings/credits/credit-transactions.tsx
index c548913..02629ed 100644
--- a/src/components/settings/credits/credit-transactions-page.tsx
+++ b/src/components/settings/credits/credit-transactions.tsx
@@ -8,7 +8,10 @@ import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
-export function CreditTransactionsPageClient() {
+/**
+ * Credit transactions component
+ */
+export function CreditTransactions() {
   const t = useTranslations('Dashboard.settings.credits.transactions');
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
diff --git a/src/components/settings/billing/credits-balance-card.tsx b/src/components/settings/credits/credits-balance-card.tsx
similarity index 99%
rename from src/components/settings/billing/credits-balance-card.tsx
rename to src/components/settings/credits/credits-balance-card.tsx
index 7db64f8..2373ed5 100644
--- a/src/components/settings/billing/credits-balance-card.tsx
+++ b/src/components/settings/credits/credits-balance-card.tsx
@@ -25,6 +25,9 @@ import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
+/**
+ * Credits balance card, show credit balance
+ */
 export default function CreditsBalanceCard() {
   // Don't render if credits are disabled - move this check before any hooks
   if (!websiteConfig.credits.enableCredits) {
diff --git a/src/components/settings/credits/credits-page-client.tsx b/src/components/settings/credits/credits-page-client.tsx
new file mode 100644
index 0000000..3b35756
--- /dev/null
+++ b/src/components/settings/credits/credits-page-client.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { CreditPackages } from '@/components/settings/credits/credit-packages';
+import { CreditTransactions } from '@/components/settings/credits/credit-transactions';
+import CreditsBalanceCard from '@/components/settings/credits/credits-balance-card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useTranslations } from 'next-intl';
+
+/**
+ * Credits page client, show credit balance and transactions
+ */
+export default function CreditsPageClient() {
+  const t = useTranslations('Dashboard.settings.credits');
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Tabs defaultValue="balance" className="w-full">
+        <TabsList className="">
+          <TabsTrigger value="balance">{t('tabs.balance')}</TabsTrigger>
+          <TabsTrigger value="transactions">
+            {t('tabs.transactions')}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="balance" className="mt-2 flex flex-col gap-4">
+          {/* Credits Balance Card */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <CreditsBalanceCard />
+          </div>
+
+          {/* Credit Packages */}
+          <div className="w-full">
+            <CreditPackages />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="transactions" className="mt-2">
+          {/* Credit Transactions */}
+          <CreditTransactions />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}