payemnt billing and credits refactoring

frontend/src/components/billing/PayInvoiceModal.tsx

@@ -25,7 +25,7 @@ import {
 } from '../../icons';
 import { API_BASE_URL } from '../../services/api';
 import { useAuthStore } from '../../store/authStore';
-import { subscribeToPlan, getAvailablePaymentMethods } from '../../services/billing.api';
+import { subscribeToPlan, getAvailablePaymentMethods, purchaseCredits } from '../../services/billing.api';
 
 interface BankDetails {
   bank_name: string;
@@ -38,6 +38,8 @@ interface BankDetails {
 interface Invoice {
   id: number;
   invoice_number: string;
+  invoice_type?: 'subscription' | 'credit_package' | 'addon' | 'custom';
+  credit_package_id?: string | number | null;
   total?: string;
   total_amount?: string;
   currency?: string;
@@ -126,6 +128,8 @@ export default function PayInvoiceModal({
   const currency = invoice.currency?.toUpperCase() || 'USD';
   const planId = invoice.subscription?.plan?.id;
   const planSlug = invoice.subscription?.plan?.slug;
+  const isCreditInvoice = invoice.invoice_type === 'credit_package';
+  const creditPackageId = invoice.credit_package_id ? String(invoice.credit_package_id) : null;
   
   // Check if user's default method is selected (for showing badge)
   const isDefaultMethod = (option: PaymentOption): boolean => {
@@ -181,6 +185,29 @@ export default function PayInvoiceModal({
   }, [isOpen, isPakistan, selectedOption, userCountry, bankDetails]);
 
   const handleStripePayment = async () => {
+    if (isCreditInvoice) {
+      if (!creditPackageId) {
+        setError('Unable to process card payment. Credit package not found on invoice. Please contact support.');
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError('');
+
+        const result = await purchaseCredits(creditPackageId, 'stripe', {
+          return_url: `${window.location.origin}/account/usage?purchase=success`,
+          cancel_url: `${window.location.origin}/account/usage?purchase=canceled`,
+        });
+
+        window.location.href = result.redirect_url;
+      } catch (err: any) {
+        setError(err.message || 'Failed to initiate card payment');
+        setLoading(false);
+      }
+      return;
+    }
+
     // Use plan slug if available, otherwise fall back to id
     const planIdentifier = planSlug || (planId ? String(planId) : null);
     
@@ -208,6 +235,29 @@ export default function PayInvoiceModal({
   };
 
   const handlePayPalPayment = async () => {
+    if (isCreditInvoice) {
+      if (!creditPackageId) {
+        setError('Unable to process PayPal payment. Credit package not found on invoice. Please contact support.');
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError('');
+
+        const result = await purchaseCredits(creditPackageId, 'paypal', {
+          return_url: `${window.location.origin}/account/usage?purchase=success`,
+          cancel_url: `${window.location.origin}/account/usage?purchase=canceled`,
+        });
+
+        window.location.href = result.redirect_url;
+      } catch (err: any) {
+        setError(err.message || 'Failed to initiate PayPal payment');
+        setLoading(false);
+      }
+      return;
+    }
+
     // Use plan slug if available, otherwise fall back to id
     const planIdentifier = planSlug || (planId ? String(planId) : null);