From e3aa8eab55e4f6d99681d72a02529668d1d99a11 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Sat, 12 Jul 2025 20:23:23 +0800
Subject: [PATCH] feat: add support for free plan users in credit packages and
 update billing card layout

---
 src/components/settings/billing/billing-card.tsx    |  2 +-
 src/components/settings/credits/credit-packages.tsx | 10 +++++++++-
 src/config/website.tsx                              |  2 +-
 src/types/index.d.ts                                |  1 +
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/billing/billing-card.tsx b/src/components/settings/billing/billing-card.tsx
index a969701..737f4d0 100644
--- a/src/components/settings/billing/billing-card.tsx
+++ b/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">
diff --git a/src/components/settings/credits/credit-packages.tsx b/src/components/settings/credits/credit-packages.tsx
index 8aedc1b..3c539be 100644
--- a/src/components/settings/credits/credit-packages.tsx
+++ b/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
diff --git a/src/config/website.tsx b/src/config/website.tsx
index 4cdefa2..6d820a1 100644
--- a/src/config/website.tsx
+++ b/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',
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 39fd6d3..dc291f7 100644
--- a/src/types/index.d.ts
+++ b/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