refactor: update billing and credits pages & move credit balance and packages to credits page

This commit is contained in:
javayhu 2025-08-18 00:19:35 +08:00
parent f1d02720d0
commit 904dceec44
2 changed files with 32 additions and 19 deletions

View File

@ -1,27 +1,11 @@
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';
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">
{/* Billing and Credits Balance Cards */}
<div className="flex flex-col gap-8">
<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>
);
}

View File

@ -1,10 +1,13 @@
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 { 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 +15,31 @@ export default function CreditsPage() {
redirect(Routes.SettingsBilling);
}
return <CreditTransactionsPageClient />;
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>
);
}