refactor: remove ConsumeCreditCard component and integrate its functionality into ConsumeCreditsCard

src/ai/text/components/consume-credit-card.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { CreditsBalanceButton } from '@/components/layout/credits-balance-button';
-import { Button } from '@/components/ui/button';
-import { useConsumeCredits, useCreditBalance } from '@/hooks/use-credits';
-import { CoinsIcon } from 'lucide-react';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-const CONSUME_CREDITS = 50;
-
-export function ConsumeCreditCard() {
-  const { data: balance = 0, isLoading: isLoadingBalance } = useCreditBalance();
-  const consumeCreditsMutation = useConsumeCredits();
-  const [loading, setLoading] = useState(false);
-
-  const hasEnoughCredits = (amount: number) => balance >= amount;
-
-  const handleConsume = async () => {
-    if (!hasEnoughCredits(CONSUME_CREDITS)) {
-      toast.error('Insufficient credits, please buy more credits.');
-      return;
-    }
-    setLoading(true);
-    try {
-      await consumeCreditsMutation.mutateAsync({
-        amount: CONSUME_CREDITS,
-        description: `AI Text Credit Consumption (${CONSUME_CREDITS} credits)`,
-      });
-      toast.success(`${CONSUME_CREDITS} credits have been consumed.`);
-    } catch (error) {
-      toast.error('Failed to consume credits, please try again later.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex flex-col items-center gap-8 p-4 border rounded-lg">
-      <div className="w-full flex flex-row items-center justify-end">
-        <CreditsBalanceButton />
-      </div>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={handleConsume}
-        disabled={
-          loading || isLoadingBalance || consumeCreditsMutation.isPending
-        }
-        className="w-full cursor-pointer"
-      >
-        <CoinsIcon className="size-4" />
-        <span>Consume {CONSUME_CREDITS} credits</span>
-      </Button>
-    </div>
-  );
-}

src/ai/text/components/index.ts

@@ -1,5 +1,4 @@
 export { AnalysisResults } from './analysis-results';
-export { ConsumeCreditCard } from './consume-credit-card';
 export { LoadingStates } from './loading-states';
 export { UrlInputForm } from './url-input-form';
 export { WebContentAnalyzer } from './web-content-analyzer';

src/app/[locale]/(marketing)/(pages)/test/page.tsx

@@ -1,12 +1,12 @@
 import Container from '@/components/layout/container';
-import { CreditsTest } from '@/components/test/credits-test';
+import { ConsumeCreditsCard } from '@/components/test/credits-test';
 
 export default async function TestPage() {
   return (
     <Container className="py-16 px-4">
       <div className="max-w-4xl mx-auto space-y-8">
         {/* credits test */}
-        <CreditsTest />
+        <ConsumeCreditsCard />
       </div>
     </Container>
   );

src/components/test/credits-test.tsx

@@ -6,19 +6,27 @@ import { CoinsIcon } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
-export function CreditsTest() {
+const CONSUME_CREDITS = 10;
-  const { data: balance = 0, isLoading } = useCreditBalance();
+
+export function ConsumeCreditsCard() {
+  const { data: balance = 0, isLoading: isLoadingBalance } = useCreditBalance();
   const consumeCreditsMutation = useConsumeCredits();
   const [loading, setLoading] = useState(false);
 
+  const hasEnoughCredits = (amount: number) => balance >= amount;
+
   const handleConsume = async () => {
+    if (!hasEnoughCredits(CONSUME_CREDITS)) {
+      toast.error('Insufficient credits, please buy more credits.');
+      return;
+    }
     setLoading(true);
     try {
       await consumeCreditsMutation.mutateAsync({
-        amount: 10,
+        amount: CONSUME_CREDITS,
-        description: 'Test credit consumption',
+        description: `Test credit consumption (${CONSUME_CREDITS} credits)`,
       });
-      toast.success('10 credits consumed successfully!');
+      toast.success(`${CONSUME_CREDITS} credits consumed successfully!`);
     } catch (error) {
       toast.error('Failed to consume credits');
     } finally {
@@ -39,11 +47,13 @@ export function CreditsTest() {
       <div className="flex gap-2">
         <Button
           onClick={handleConsume}
-          disabled={loading || consumeCreditsMutation.isPending}
+          disabled={
+            loading || consumeCreditsMutation.isPending || isLoadingBalance
+          }
           size="sm"
         >
           <CoinsIcon className="w-4 h-4 mr-2" />
-          Consume 10 Credits
+          Consume {CONSUME_CREDITS} Credits
         </Button>
       </div>