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

@@ -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": {

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

@@ -19,10 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
+import { getCreditPackages } from '@/config/credits-config';
-  getCreditPackageByIdInClient,
-  getCreditPackagesInClient,
-} from '@/credits/client';
 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">