feat: enhance billing and credits management with new components and improved layout

messages/en.json

@@ -587,9 +587,12 @@
         "description": "Manage your credits",
         "balance": {
           "title": "Credit Balance",
+          "description": "Your credit balance",
           "credits": "Credits",
           "creditsDescription": "You have {credits} credits",
-          "creditsExpired": "Credits expired"
+          "creditsExpired": "Credits expired",
+          "creditsAdded": "Credits have been added to your account",
+          "viewTransactions": "View Transactions"
         },
         "packages": {
           "balance": "Credit Balance",

src/actions/create-credit-checkout-session.ts

@@ -90,10 +90,10 @@ export const createCreditCheckoutSession = actionClient
 
       // Create checkout session with credit-specific URLs
       const successUrl = getUrlWithLocale(
-        `${Routes.SettingsCredits}?session_id={CHECKOUT_SESSION_ID}`,
+        `${Routes.SettingsBilling}?session_id={CHECKOUT_SESSION_ID}`,
         locale
       );
-      const cancelUrl = getUrlWithLocale(Routes.SettingsCredits, locale);
+      const cancelUrl = getUrlWithLocale(Routes.SettingsBilling, locale);
 
       const params: CreateCreditCheckoutParams = {
         packageId,

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

@@ -1,5 +1,23 @@
 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';
 
 export default function BillingPage() {
-  return <BillingCard />;
+  return (
+    <div className="space-y-8">
+      {/* Billing and Credits Balance Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <BillingCard />
+        {websiteConfig.credits.enableCredits && <CreditsBalanceCard />}
+      </div>
+
+      {/* Credit Packages */}
+      {websiteConfig.credits.enableCredits && (
+        <div className="w-full">
+          <CreditPackages />
+        </div>
+      )}
+    </div>
+  );
 }

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

@@ -1,29 +1,16 @@
-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 { useTranslations } from 'next-intl';
+import { websiteConfig } from '@/config/website';
+import { Routes } from '@/routes';
+import { redirect } from 'next/navigation';
 
+/**
+ * Credits page, show credit transactions
+ */
 export default function CreditsPage() {
-  const t = useTranslations('Dashboard.settings.credits');
-
-  return (
-    <Tabs defaultValue="balance" className="">
-      <TabsList className="">
-        <TabsTrigger value="balance" className="flex items-center gap-2 cursor-pointer">
-          {t('tabs.balance')}
-        </TabsTrigger>
-        <TabsTrigger value="transactions" className="flex items-center gap-2 cursor-pointer">
-          {t('tabs.transactions')}
-        </TabsTrigger>
-      </TabsList>
-
-      <TabsContent value="balance" className="space-y-6 py-4">
-        <CreditPackages />
-      </TabsContent>
-
-      <TabsContent value="transactions" className="space-y-6 py-4">
-        <CreditTransactionsPageClient />
-      </TabsContent>
-    </Tabs>
-  );
+  // If credits are disabled, redirect to billing page
+  if (!websiteConfig.credits.enableCredits) {
+    redirect(Routes.SettingsBilling);
+  }
+
+  return <CreditTransactionsPageClient />;
 }

src/components/settings/billing/billing-card.tsx

@@ -90,7 +90,6 @@ export default function BillingCard() {
   // Render loading skeleton
   if (isPageLoading) {
     return (
-      <div className="grid md:grid-cols-2 gap-8">
       <Card
         className={cn(
           'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
@@ -111,14 +110,12 @@ export default function BillingCard() {
           <Skeleton className="h-10 w-4/5" />
         </CardFooter>
       </Card>
-      </div>
     );
   }
 
   // Render error state
   if (loadPaymentError) {
     return (
-      <div className="grid md:grid-cols-2 gap-8">
       <Card
         className={cn(
           'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
@@ -142,14 +139,12 @@ export default function BillingCard() {
           </Button>
         </CardFooter>
       </Card>
-      </div>
     );
   }
 
   // currentPlanFromStore maybe null, so we need to check if it is null
   if (!currentPlanFromStore) {
     return (
-      <div className="grid md:grid-cols-2 gap-8">
       <Card
         className={cn(
           'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
@@ -170,7 +165,6 @@ export default function BillingCard() {
           </Button>
         </CardFooter>
       </Card>
-      </div>
     );
   }
 
@@ -179,7 +173,6 @@ export default function BillingCard() {
   // console.log('billing card, currentUser', currentUser);
 
   return (
-    <div className="grid md:grid-cols-2 gap-8">
     <Card
       className={cn(
         'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
@@ -271,6 +264,5 @@ export default function BillingCard() {
         )}
       </CardFooter>
     </Card>
-    </div>
   );
 }

src/components/settings/billing/credits-balance-card.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { websiteConfig } from '@/config/website';
+import { useCredits } from '@/hooks/use-credits';
+import { LocaleLink, useLocaleRouter } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+import { Routes } from '@/routes';
+import { CoinsIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+
+export default function CreditsBalanceCard() {
+  const t = useTranslations('Dashboard.settings.credits.balance');
+  const searchParams = useSearchParams();
+  const localeRouter = useLocaleRouter();
+  const hasHandledSession = useRef(false);
+
+  // Use the credits hook to get balance
+  const { balance, isLoading, error, refresh } = useCredits();
+
+  // Don't render if credits are disabled
+  if (!websiteConfig.credits.enableCredits) {
+    return null;
+  }
+
+  // Check for payment success and show success message
+  useEffect(() => {
+    const sessionId = searchParams.get('session_id');
+    if (sessionId && !hasHandledSession.current) {
+      hasHandledSession.current = true;
+      // Show success toast (delayed to avoid React lifecycle conflicts)
+      setTimeout(() => {
+        toast.success(t('creditsAdded'));
+      }, 0);
+
+      // Refresh credits data to show updated balance
+      refresh();
+
+      // Clean up URL parameters
+      const url = new URL(window.location.href);
+      url.searchParams.delete('session_id');
+      localeRouter.replace(Routes.SettingsBilling + url.search);
+    }
+  }, [searchParams, localeRouter, refresh]);
+
+  // Render loading skeleton
+  if (isLoading) {
+    return (
+      <Card
+        className={cn(
+          'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
+        )}
+      >
+        <CardHeader>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 flex-1">
+          <div className="space-y-3">
+            <Skeleton className="h-6 w-1/2" />
+            <Skeleton className="h-6 w-4/5" />
+          </div>
+        </CardContent>
+        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+          <Skeleton className="h-10 w-4/5" />
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  // Render error state
+  if (error) {
+    return (
+      <Card
+        className={cn(
+          'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
+        )}
+      >
+        <CardHeader>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 flex-1">
+          <div className="text-destructive text-sm">{error}</div>
+        </CardContent>
+        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+          <Button variant="outline" className="cursor-pointer" asChild>
+            <LocaleLink href={Routes.SettingsCredits}>
+              {t('viewTransactions')}
+            </LocaleLink>
+          </Button>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      className={cn(
+        'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
+      )}
+    >
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">{t('title')}</CardTitle>
+        <CardDescription>{t('description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4 flex-1">
+        {/* Credits balance display */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <CoinsIcon className="h-6 w-6 text-muted-foreground" />
+            <div className="text-3xl font-medium">
+              {balance.toLocaleString()}
+            </div>
+          </div>
+          {/* <Badge variant="outline">{t('available')}</Badge> */}
+        </div>
+
+        {/* Balance information */}
+        {/* <div className="text-sm text-muted-foreground">{t('message')}</div> */}
+      </CardContent>
+      <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+        <Button variant="default" className="cursor-pointer" asChild>
+          <LocaleLink href={Routes.SettingsCredits}>
+            {t('viewTransactions')}
+          </LocaleLink>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/settings/credits/credit-packages.tsx

@@ -9,17 +9,12 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { getCreditPackages } from '@/config/credits-config';
-import { useCredits } from '@/hooks/use-credits';
+import { websiteConfig } from '@/config/website';
 import { useCurrentUser } from '@/hooks/use-current-user';
-import { useLocaleRouter } from '@/i18n/navigation';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
-import { Routes } from '@/routes';
-import { CircleCheckBigIcon, CoinsIcon, Loader2Icon } from 'lucide-react';
+import { CircleCheckBigIcon, CoinsIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useSearchParams } from 'next/navigation';
-import { useEffect, useRef } from 'react';
-import { toast } from 'sonner';
 import { CreditCheckoutButton } from './credit-checkout-button';
 
 /**
@@ -28,68 +23,21 @@ import { CreditCheckoutButton } from './credit-checkout-button';
  */
 export function CreditPackages() {
   const t = useTranslations('Dashboard.settings.credits.packages');
-  const searchParams = useSearchParams();
-  const localeRouter = useLocaleRouter();
-  const hasHandledSession = useRef(false);
-
-  // Use the new useCredits hook
-  const { balance, isLoading, refresh } = useCredits();
 
   // Get current user
   const currentUser = useCurrentUser();
 
+  // Don't render if credits are disabled
+  if (!websiteConfig.credits.enableCredits) {
+    return null;
+  }
+
   // show only enabled packages
   const creditPackages = Object.values(getCreditPackages()).filter(
     (pkg) => !pkg.disabled && pkg.price.priceId
   );
 
-  // Check for payment success and show success message
-  useEffect(() => {
-    const sessionId = searchParams.get('session_id');
-    if (sessionId && !hasHandledSession.current) {
-      hasHandledSession.current = true;
-      // Show success toast (delayed to avoid React lifecycle conflicts)
-      setTimeout(() => {
-        toast.success(t('creditsAdded'));
-      }, 0);
-
-      // Refresh credits data to show updated balance
-      refresh();
-
-      // Clean up URL parameters
-      const url = new URL(window.location.href);
-      url.searchParams.delete('session_id');
-      // Use Routes.SettingsCredits + url.search to properly handle locale routing
-      localeRouter.replace(Routes.SettingsCredits + url.search);
-    }
-  }, [searchParams, localeRouter, refresh]);
-
   return (
-    <div className="space-y-6">
-      <Card className="w-full">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0">
-          <CardTitle className="text-lg font-semibold">
-            {t('balance')}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center space-x-2">
-              {/* <CoinsIcon className="h-4 w-4 text-muted-foreground" /> */}
-              <div>
-                {isLoading ? (
-                  <Loader2Icon className="h-8 w-8 animate-spin" />
-                ) : (
-                  <div className="text-2xl font-bold">
-                    {balance.toLocaleString()}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
     <Card className="w-full">
       <CardHeader>
         <CardTitle className="text-lg font-semibold">{t('title')}</CardTitle>
@@ -98,7 +46,7 @@ export function CreditPackages() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
           {creditPackages.map((creditPackage) => (
             <Card
               key={creditPackage.id}
@@ -159,6 +107,5 @@ export function CreditPackages() {
         </div>
       </CardContent>
     </Card>
-    </div>
   );
 }