Merge remote-tracking branch 'origin/main' into cloudflare

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

messages/zh.json

@@ -588,6 +588,10 @@
       "credits": {
         "title": "积分",
         "description": "管理您的积分交易",
+        "tabs": {
+          "balance": "积分余额",
+          "transactions": "交易记录"
+        },
         "balance": {
           "title": "积分余额",
           "description": "您的积分余额",

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,

src/app/[locale]/(protected)/settings/billing/page.tsx

@@ -1,27 +1,14 @@
 import BillingCard from '@/components/settings/billing/billing-card';
-import CreditsBalanceCard from '@/components/settings/billing/credits-balance-card';
-import { CreditPackages } from '@/components/settings/credits/credit-packages';
-import { websiteConfig } from '@/config/website';
-import { useMemo } from 'react';
 
+/**
+ * Billing page, show billing information
+ */
 export default function BillingPage() {
-  // Memoize the credits enabled state to ensure consistency across renders
-  const creditsEnabled = useMemo(() => websiteConfig.credits.enableCredits, []);
-
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
-      {/* Billing and Credits Balance Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <BillingCard />
-        {creditsEnabled && <CreditsBalanceCard />}
       </div>
-
-      {/* Credit Packages */}
-      {creditsEnabled && (
-        <div className="w-full">
-          <CreditPackages />
-        </div>
-      )}
     </div>
   );
 }

src/app/[locale]/(protected)/settings/credits/page.tsx

@@ -1,10 +1,10 @@
-import { CreditTransactionsPageClient } from '@/components/settings/credits/credit-transactions-page';
+import CreditsPageClient from '@/components/settings/credits/credits-page-client';
 import { websiteConfig } from '@/config/website';
 import { Routes } from '@/routes';
 import { redirect } from 'next/navigation';
 
 /**
- * Credits page, show credit transactions
+ * Credits page, show credit balance and transactions
  */
 export default function CreditsPage() {
   // If credits are disabled, redirect to billing page
@@ -12,5 +12,5 @@ export default function CreditsPage() {
     redirect(Routes.SettingsBilling);
   }
 
-  return <CreditTransactionsPageClient />;
+  return <CreditsPageClient />;
 }

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

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);

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) {

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