From 73ce18f56494e8030cf16377b725fb3e9230c38d Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Mon, 7 Jul 2025 01:10:06 +0800
Subject: [PATCH] refactor: update credit package descriptions and improve
 component structure

- Revised credit package descriptions in the English JSON file for clarity and consistency.
- Refactored CreditPackages component to utilize a more efficient method for retrieving credit packages.
- Removed obsolete functions and streamlined the code for better maintainability and performance.
---
 messages/en.json                              |  8 ++++----
 .../settings/credits/credit-packages.tsx      | 19 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index d77b4f9..fbb86e9 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -114,19 +114,19 @@
   "CreditPackages": {
     "basic": {
       "name": "Basic",
-      "description": "Basic features for personal use"
+      "description": "Basic credits package description"
     },
     "standard": {
       "name": "Standard",
-      "description": "Standard features for personal use"
+      "description": "Standard credits package description"
     },
     "premium": {
       "name": "Premium",
-      "description": "Premium features for personal use"
+      "description": "Premium credits package description"
     },
     "enterprise": {
       "name": "Enterprise",
-      "description": "Enterprise features for personal use"
+      "description": "Enterprise credits package description"
     }
   },
   "NotFoundPage": {
diff --git a/src/components/settings/credits/credit-packages.tsx b/src/components/settings/credits/credit-packages.tsx
index afd1a61..8b48748 100644
--- a/src/components/settings/credits/credit-packages.tsx
+++ b/src/components/settings/credits/credit-packages.tsx
@@ -19,10 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  getCreditPackageByIdInClient,
-  getCreditPackagesInClient,
-} from '@/credits/client';
+import { getCreditPackages } from '@/config/credits-config';
 import type { CreditPackage } from '@/credits/types';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
@@ -33,6 +30,10 @@ import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { StripePaymentForm } from './stripe-payment-form';
 
+/**
+ * Credit packages component
+ * @returns Credit packages component
+ */
 export function CreditPackages() {
   const t = useTranslations('Dashboard.settings.credits.packages');
   const [loadingCredits, setLoadingCredits] = useState(true);
@@ -50,6 +51,8 @@ export function CreditPackages() {
     clientSecret: null,
   });
 
+  const creditPackages = Object.values(getCreditPackages());
+
   const fetchCredits = async () => {
     try {
       setLoadingCredits(true);
@@ -122,7 +125,7 @@ export function CreditPackages() {
   };
 
   const getPackageInfo = (packageId: string): CreditPackage | undefined => {
-    return getCreditPackageByIdInClient(packageId);
+    return creditPackages.find((pkg) => pkg.id === packageId);
   };
 
   return (
@@ -158,7 +161,7 @@ export function CreditPackages() {
         </CardHeader>
         <CardContent>
           <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-            {getCreditPackagesInClient().map((pkg) => (
+            {creditPackages.map((pkg) => (
               <Card
                 key={pkg.id}
                 className={cn(
@@ -177,10 +180,6 @@ export function CreditPackages() {
                   </div>
                 )}
 
-                {/* <CardHeader className="text-center">
-                      <CardTitle className="text-lg capitalize">{pkg.id}</CardTitle>
-                    </CardHeader> */}
-
                 <CardContent className="space-y-3">
                   {/* Price and Credits - Left/Right Layout */}
                   <div className="flex items-center justify-between py-2">