feat: add support for free plan users in credit packages and update billing card layout

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

@@ -170,7 +170,7 @@ export default function BillingCard() {
       </CardHeader>
       <CardContent className="space-y-4 flex-1">
         {/* Plan name and status */}
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-start space-x-4">
           <div className="text-3xl font-medium">{currentPlan?.name}</div>
           {subscription && (
             <Badge variant="outline">

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

@@ -11,6 +11,7 @@ import {
 import { getCreditPackages } from '@/config/credits-config';
 import { websiteConfig } from '@/config/website';
 import { useCurrentUser } from '@/hooks/use-current-user';
+import { usePayment } from '@/hooks/use-payment';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
 import { CircleCheckBigIcon, CoinsIcon } from 'lucide-react';
@@ -24,14 +25,21 @@ import { CreditCheckoutButton } from './credit-checkout-button';
 export function CreditPackages() {
   const t = useTranslations('Dashboard.settings.credits.packages');
 
-  // Get current user
+  // Get current user and payment info
   const currentUser = useCurrentUser();
+  const { currentPlan } = usePayment();
 
   // Don't render if credits are disabled
   if (!websiteConfig.credits.enableCredits) {
     return null;
   }
 
+  // Check if user is on free plan and enableForFreePlan is false
+  const isFreePlan = currentPlan?.isFree === true;
+  if (isFreePlan && !websiteConfig.credits.enableForFreePlan) {
+    return null;
+  }
+
   // show only enabled packages
   const creditPackages = Object.values(getCreditPackages()).filter(
     (pkg) => !pkg.disabled && pkg.price.priceId

src/config/website.tsx

@@ -146,12 +146,12 @@ export const websiteConfig: WebsiteConfig = {
   },
   credits: {
     enableCredits: true,
+    enableForFreePlan: false,
     registerGiftCredits: {
       enable: true,
       credits: 100,
       expireDays: 30,
     },
-
     packages: {
       basic: {
         id: 'basic',

src/types/index.d.ts

@@ -155,6 +155,7 @@ export interface PriceConfig {
  */
 export interface CreditsConfig {
   enableCredits: boolean;            // Whether to enable credits
+  enableForFreePlan: boolean;        // Whether to enable purchase credits for free plan users
   registerGiftCredits: {
     enable: boolean;                 // Whether to enable register gift credits
     credits: number;                 // The number of credits to give to the user