fixing and creatign mess

frontend/src/services/billing.api.ts

@@ -98,12 +98,14 @@ export interface Invoice {
   invoice_number: string;
   status: 'draft' | 'pending' | 'paid' | 'void' | 'uncollectible';
   total_amount: string;
+  total?: string; // Alias
   subtotal: string;
   tax_amount: string;
   currency: string;
   created_at: string;
   paid_at?: string;
   due_date?: string;
+  invoice_date?: string;
   line_items: Array<{
     description: string;
     amount: string;
@@ -115,6 +117,16 @@ export interface Invoice {
   billing_period_start?: string;
   billing_period_end?: string;
   account_name?: string;
+  // New fields for payment flow
+  payment_method?: string;
+  subscription?: {
+    id: number;
+    plan?: {
+      id: number;
+      name: string;
+      slug?: string;
+    };
+  } | null;
 }
 
 export interface Payment {
@@ -170,6 +182,7 @@ export interface PaymentMethod {
   name?: string;
   is_enabled: boolean;
   is_default?: boolean;
+  is_verified?: boolean;
   instructions?: string;
   country_code?: string;
   bank_details?: {
@@ -651,17 +664,32 @@ export async function removeTeamMember(memberId: number): Promise<{
 // PAYMENT METHODS
 // ============================================================================
 
-// Account payment methods (CRUD)
+// Get GLOBAL payment method configs (system-wide available payment options like stripe, paypal, bank_transfer)
+// This is used on Plans page to show what payment methods are available to choose
 export async function getAvailablePaymentMethods(): Promise<{
   results: PaymentMethod[];
   count: number;
 }> {
-  const response = await fetchAPI('/v1/billing/payment-methods/');
-  // Frontend guard: only allow the simplified set we currently support
-  const allowed = new Set(['bank_transfer', 'manual']);
+  // Call the payment-configs endpoint which returns global PaymentMethodConfig records
+  const response = await fetchAPI('/v1/billing/payment-configs/payment-methods/');
+  // Return all payment methods - stripe, paypal, bank_transfer, manual, local_wallet
   const results = Array.isArray(response.results) ? response.results : [];
-  const filtered = results.filter((m: PaymentMethod) => allowed.has(m.type));
-  return { results: filtered, count: filtered.length };
+  // Map payment_method to type for consistent API
+  const mapped = results.map((m: any) => ({
+    ...m,
+    type: m.payment_method || m.type,  // PaymentMethodConfig uses payment_method field
+  }));
+  return { results: mapped, count: mapped.length };
+}
+
+// Get account-specific payment methods (user's saved/verified payment methods)
+export async function getAccountPaymentMethods(): Promise<{
+  results: PaymentMethod[];
+  count: number;
+}> {
+  const response = await fetchAPI('/v1/billing/payment-methods/');
+  const results = Array.isArray(response.results) ? response.results : [];
+  return { results, count: results.length };
 }
 
 export async function createPaymentMethod(data: {