refactor: implement credits page with balance and transactions tabs

This commit is contained in:
javayhu 2025-08-18 00:29:56 +08:00
parent 904dceec44
commit 90757475ac
9 changed files with 66 additions and 35 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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 />;
}

View File

@ -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

View File

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

View File

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

View File

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