fix: add conditional rendering for payment data in credit packages

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;