payment gateways and plans billing and signup pages refactored

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -67,6 +67,7 @@ import {
 } from '../../services/billing.api';
 import { useAuthStore } from '../../store/authStore';
 import PayInvoiceModal from '../../components/billing/PayInvoiceModal';
+import PendingPaymentView from '../../components/billing/PendingPaymentView';
 
 export default function PlansAndBillingPage() {
   const { startLoading, stopLoading } = usePageLoading();
@@ -385,6 +386,15 @@ export default function PlansAndBillingPage() {
   const hasPendingPayment = payments.some((p) => p.status === 'pending_approval');
   const hasPendingInvoice = invoices.some((inv) => inv.status === 'pending');
   
+  // Detect new user pending payment scenario:
+  // - account status is 'pending_payment'
+  // - user has never made a successful payment
+  const accountStatus = user?.account?.status || '';
+  const hasEverPaid = payments.some((p) => p.status === 'succeeded' || p.status === 'completed');
+  const isNewUserPendingPayment = accountStatus === 'pending_payment' && !hasEverPaid;
+  const pendingInvoice = invoices.find((inv) => inv.status === 'pending');
+  const billingCountry = (user?.account as any)?.billing_country || 'US';
+  
   // Combined check: disable Buy Credits if no active plan OR has pending invoice
   const canBuyCredits = hasActivePlan && !hasPendingInvoice;
 
@@ -399,6 +409,29 @@ export default function PlansAndBillingPage() {
     return price > 0 && p.id !== effectivePlanId;
   }).sort((a, b) => (Number(a.price) || 0) - (Number(b.price) || 0));
 
+  // NEW USER PENDING PAYMENT - Show full-page payment view
+  // This is the simplified flow for users who just signed up with a paid plan
+  if (isNewUserPendingPayment && pendingInvoice) {
+    const planName = currentPlan?.name || pendingInvoice.subscription?.plan?.name || 'Selected Plan';
+    const planPrice = pendingInvoice.total_amount || pendingInvoice.total || '0';
+    
+    return (
+      <PendingPaymentView
+        invoice={pendingInvoice}
+        userCountry={billingCountry}
+        planName={planName}
+        planPrice={planPrice}
+        onPaymentSuccess={() => {
+          // Refresh user and billing data
+          const { refreshUser } = useAuthStore.getState();
+          refreshUser().catch(() => {});
+          loadData();
+        }}
+      />
+    );
+  }
+
+  // EXISTING USER - Show normal billing dashboard
   return (
     <>
       <PageMeta title="Plans & Billing" description="Manage your subscription and payments" />