From c94784e711e6fcefee2527ae4f1a0cdb2c3fd7b4 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Fri, 5 Sep 2025 00:00:16 +0800
Subject: [PATCH] fix: add conditional rendering for payment data in credit
 packages

---
 src/components/settings/credits/credit-packages.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/settings/credits/credit-packages.tsx b/src/components/settings/credits/credit-packages.tsx
index 81f365a..524f3ba 100644
--- a/src/components/settings/credits/credit-packages.tsx
+++ b/src/components/settings/credits/credit-packages.tsx
@@ -37,6 +37,7 @@ export function CreditPackages() {
   const currentPlan = paymentData?.currentPlan;
 
   // Get credit packages with translations - must be called here to maintain hook order
+  // This function contains useTranslations hook, so it must be called before any conditional returns
   const creditPackages = Object.values(getCreditPackages()).filter(
     (pkg) => !pkg.disabled && pkg.price.priceId
   );
@@ -46,6 +47,11 @@ export function CreditPackages() {
     return null;
   }
 
+  // Don't render anything if we don't have payment data yet
+  if (!paymentData) {
+    return null;
+  }
+
   // Check if user is on free plan and enablePackagesForFreePlan is false
   const isFreePlan = currentPlan?.isFree === true;