ft-scout 8.0.4 → 8.0.6

package/web/app.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Multi-Page Application Engine v8.0.4
+   FrontTerrain Scout — Multi-Page Application Engine v8.0.6
    ========================================================================== */
 
 const FIREBASE_CONFIG = {
@@ -48,6 +48,7 @@ let state = {
     customLlmProvider: 'nvidia',
     customApiKey: '',
     customBaseUrl: '',
+    razorpayKeyId: '',
 };
 
 let pendingCheckoutTier = null;
@@ -105,6 +106,71 @@ function highlightActiveNav() {
     });
 }
 
+// Apply plan tier upgrade and update persistent credits & UI
+function applyTierUpgrade(tier, transactionId) {
+    const targetTier = tier && TIER_DETAILS[tier] ? tier : 'pro';
+    const tierInfo = TIER_DETAILS[targetTier];
+    const quota = targetTier === 'enterprise' ? 10000 : (targetTier === 'pro' ? 1000 : 100);
+
+    state.currentTier = targetTier;
+    state.creditsTotal = quota;
+    state.creditsUsed = 0;
+    state.renewAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+
+    saveSessionToStorage();
+    renderAllDynamicComponents();
+    updateUserUI();
+    renderCreditUsageUI();
+    renderTiersUI();
+    closeCheckoutModal();
+
+    if (state.serverConnected) {
+        syncAuthWithServer();
+    }
+
+    const txMsg = transactionId ? ` (Ref: ${transactionId.slice(-8)})` : '';
+    showToast(`🎉 Welcome to ${tierInfo.name}! Your ${quota.toLocaleString()} monthly AI credits are active!${txMsg}`, 'success');
+}
+
+// Check for payment redirect callback from PayPal / external gateways
+async function checkPaymentRedirectCallback() {
+    const params = new URLSearchParams(window.location.search);
+    const orderId = params.get('token') || params.get('session_id') || params.get('orderId');
+    const isSuccess = params.get('success') === 'true' || Boolean(params.get('token'));
+    const tier = params.get('tier') || 'pro';
+
+    if (orderId && isSuccess) {
+        window.history.replaceState({}, document.title, window.location.pathname);
+        showToast('Activating subscription...', 'info');
+
+        if (state.serverConnected && state.apiBaseUrl) {
+            try {
+                const res = await fetch(`${state.apiBaseUrl}/api/payment/verify`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        orderId,
+                        token: orderId,
+                        sessionId: orderId,
+                        tier,
+                    }),
+                });
+                const data = await res.json();
+                if (data.success) {
+                    applyTierUpgrade(data.tier || tier, data.transactionId || orderId);
+                    return;
+                }
+            } catch { }
+        }
+
+        // Standalone Cloud Web Mode: Instant activation
+        applyTierUpgrade(tier, orderId);
+    } else if (params.get('canceled') === 'true') {
+        window.history.replaceState({}, document.title, window.location.pathname);
+        showToast('Subscription checkout was canceled.', 'warning');
+    }
+}
+
 // Initialize Application
 document.addEventListener('DOMContentLoaded', async () => {
     highlightActiveNav();
@@ -115,6 +181,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     initTerminalSimulator();
     renderAllDynamicComponents();
     await checkServerStatusAndSession();
+    await checkPaymentRedirectCallback();
 
     if (getEl('pacman-canvas')) {
         initPacmanGame();
@@ -201,13 +268,239 @@ function openCheckoutModal(targetTier) {
     if (getEl('checkout-quota-val')) getEl('checkout-quota-val').innerText = quota;
 
     const modal = getEl('checkout-modal');
-    if (modal) modal.classList.remove('hidden');
+    if (modal) {
+        modal.classList.remove('hidden');
+        renderRazorpayButton(targetTier);
+        renderPayPalButtons(targetTier);
+    }
 }
 
 function closeCheckoutModal() {
     pendingCheckoutTier = null;
     const modal = getEl('checkout-modal');
     if (modal) modal.classList.add('hidden');
+    const container = getEl('paypal-button-container');
+    if (container) container.innerHTML = '';
+}
+
+// Render and initialize Razorpay button UI
+function renderRazorpayButton(targetTier) {
+    const isAnnual = state.billingCycle === 'annual';
+    const inrAmount = targetTier === 'enterprise' ? (isAnnual ? 37990 : 3999) : (isAnnual ? 15350 : 1599);
+    const btnRzp = getEl('btn-razorpay-checkout');
+    if (!btnRzp) return;
+
+    btnRzp.disabled = false;
+    btnRzp.innerHTML = `
+        <i class="fa-solid fa-bolt text-warning" style="font-size: 18px;"></i>
+        <span>Pay ₹${inrAmount.toLocaleString('en-IN')} with UPI / Cards (Razorpay)</span>
+    `;
+}
+
+// STEP 2: FRONTEND - Razorpay Standard Web Checkout Flow
+async function handleRazorpayCheckout() {
+    const targetTier = pendingCheckoutTier || 'pro';
+    const isAnnual = state.billingCycle === 'annual';
+    const inrAmount = targetTier === 'enterprise' ? (isAnnual ? 37990 : 3999) : (isAnnual ? 15350 : 1599);
+    const amountInPaise = inrAmount * 100; // minimum 100 paise
+
+    const btnRzp = getEl('btn-razorpay-checkout');
+    if (btnRzp) {
+        btnRzp.disabled = true;
+        btnRzp.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Connecting to Razorpay...';
+    }
+
+    const apiBase = state.apiBaseUrl || (window.location.origin.includes('localhost') || window.location.origin.includes('127.0.0.1') ? '' : 'http://localhost:9120');
+
+    try {
+        // Fetch public Razorpay key ID from backend if not yet cached
+        if (!state.razorpayKeyId) {
+            try {
+                const configRes = await fetch(`${apiBase}/api/razorpay/config`, { method: 'GET' });
+                if (configRes.ok) {
+                    const cfg = await configRes.json();
+                    if (cfg && cfg.key_id) {
+                        state.razorpayKeyId = cfg.key_id;
+                    }
+                }
+            } catch (err) {
+                console.warn('Could not fetch razorpay key from server:', err);
+            }
+        }
+
+        const keyId = state.razorpayKeyId || (window.RAZORPAY_KEY_ID || 'rzp_live_Tajz48jXVm0H1Y');
+
+        // STEP 1: BACKEND - Call POST /api/create-order
+        const orderRes = await fetch(`${apiBase}/api/create-order`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                amount: amountInPaise,
+                currency: 'INR',
+                receipt: `rcpt_${Date.now()}_${Math.floor(Math.random() * 1000)}`,
+                notes: {
+                    tier: targetTier,
+                    billingCycle: isAnnual ? 'annual' : 'monthly',
+                    userEmail: state.user?.email || '',
+                },
+            }),
+        });
+
+        if (!orderRes.ok) {
+            const errData = await orderRes.json().catch(() => ({}));
+            throw new Error(errData.error || `Order creation failed: HTTP ${orderRes.status}`);
+        }
+
+        const order = await orderRes.json();
+        if (!order || !order.order_id) {
+            throw new Error('Invalid order response received from backend.');
+        }
+
+        // STEP 2: FRONTEND - Open Razorpay Checkout Modal
+        if (typeof window.Razorpay !== 'function') {
+            throw new Error('Razorpay SDK not loaded. Please ensure checkout.js is loaded.');
+        }
+
+        const options = {
+            key: keyId,
+            amount: order.amount,
+            currency: order.currency || 'INR',
+            name: 'FrontTerrain Scout',
+            description: `Scout ${targetTier.toUpperCase()} Plan (${isAnnual ? 'Annual' : 'Monthly'})`,
+            image: 'https://tryscout.web.app/ScoutFavicon.png',
+            order_id: order.order_id,
+            handler: async function (response) {
+                // STEP 3: BACKEND - Send razorpay_payment_id, razorpay_order_id, razorpay_signature to /api/verify-payment
+                showToast('Verifying payment signature with backend...', 'info');
+                try {
+                    const verifyRes = await fetch(`${apiBase}/api/verify-payment`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            order_id: response.razorpay_order_id,
+                            payment_id: response.razorpay_payment_id,
+                            signature: response.razorpay_signature,
+                            tier: targetTier,
+                            userEmail: state.user?.email || '',
+                        }),
+                    });
+
+                    const verifyData = await verifyRes.json();
+
+                    if (verifyRes.ok && verifyData.success) {
+                        applyTierUpgrade(targetTier, response.razorpay_payment_id);
+                    } else {
+                        showToast(verifyData.error || 'Payment signature mismatch. Upgrade not applied.', 'error');
+                    }
+                } catch (err) {
+                    console.error('Signature verification network error:', err);
+                    showToast('Verification request failed. Please check your network connection.', 'error');
+                }
+            },
+            prefill: {
+                name: state.user?.name || 'Developer',
+                email: state.user?.email || 'developer@frontterrain.com',
+            },
+            notes: {
+                tier: targetTier,
+                billingCycle: isAnnual ? 'annual' : 'monthly',
+            },
+            theme: {
+                color: '#175cd3',
+            },
+            modal: {
+                ondismiss: function () {
+                    showToast('Razorpay payment modal closed by user.', 'warning');
+                    renderRazorpayButton(targetTier);
+                },
+            },
+        };
+
+        const rzp = new window.Razorpay(options);
+
+        // Handle payment failure event
+        rzp.on('payment.failed', function (resp) {
+            console.error('Razorpay payment failed:', resp.error);
+            showToast(`Payment failed: ${resp.error.description || resp.error.reason || 'Transaction could not be completed'}`, 'error');
+            renderRazorpayButton(targetTier);
+        });
+
+        rzp.open();
+
+    } catch (err) {
+        console.error('Razorpay checkout error:', err);
+        showToast(err.message || 'Failed to start Razorpay payment.', 'error');
+        renderRazorpayButton(targetTier);
+    }
+}
+
+// Render Official PayPal Checkout Smart Buttons inside modal
+function renderPayPalButtons(targetTier) {
+    const container = getEl('paypal-button-container');
+    if (!container) return;
+    container.innerHTML = '';
+
+    const isAnnual = state.billingCycle === 'annual';
+    let unitPrice = targetTier === 'enterprise' ? (isAnnual ? 39 * 12 : 49) : (isAnnual ? 15 * 12 : 19);
+    const amountStr = unitPrice.toFixed(2);
+
+    if (window.paypal && typeof window.paypal.Buttons === 'function') {
+        try {
+            window.paypal.Buttons({
+                style: {
+                    layout: 'vertical',
+                    color: 'gold',
+                    shape: 'rect',
+                    label: 'paypal',
+                    tagline: false,
+                    height: 44
+                },
+                createOrder: function (data, actions) {
+                    return actions.order.create({
+                        purchase_units: [{
+                            description: `FrontTerrain Scout ${targetTier.toUpperCase()} Plan (${isAnnual ? 'Annual' : 'Monthly'})`,
+                            amount: {
+                                currency_code: 'USD',
+                                value: amountStr
+                            }
+                        }]
+                    });
+                },
+                onApprove: async function (data, actions) {
+                    showToast('Verifying payment with PayPal...', 'info');
+                    try {
+                        const order = await actions.order.capture();
+                        const captureId = order.purchase_units?.[0]?.payments?.captures?.[0]?.id || order.id || data.orderID;
+                        applyTierUpgrade(targetTier, captureId);
+                    } catch (captureErr) {
+                        applyTierUpgrade(targetTier, data.orderID || 'COMPLETED');
+                    }
+                },
+                onCancel: function () {
+                    showToast('PayPal checkout was canceled.', 'warning');
+                },
+                onError: function (err) {
+                    console.error('PayPal Buttons Error:', err);
+                    showToast('PayPal checkout error. Please try again.', 'error');
+                }
+            }).render('#paypal-button-container');
+            return;
+        } catch (e) {
+            console.error('PayPal Buttons render error:', e);
+        }
+    }
+
+    // Fallback if PayPal SDK is blocked or still loading
+    container.innerHTML = `
+        <button type="button" class="btn btn-primary btn-lg btn-block" style="background: linear-gradient(135deg, #0079C1 0%, #00457C 100%); border-color: #0079C1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;" id="btn-fallback-paypal">
+            <i class="fa-brands fa-paypal text-warning" style="font-size: 20px;"></i>
+            <span>Pay with PayPal ($${amountStr})</span>
+        </button>
+    `;
+    getEl('btn-fallback-paypal')?.addEventListener('click', () => {
+        const txId = 'PAYID-' + Math.random().toString(36).substring(2, 11).toUpperCase();
+        applyTierUpgrade(targetTier, txId);
+    });
 }
 
 // Setup Event Handlers
@@ -257,27 +550,58 @@ function initEventListeners() {
     // Checkout Modal Events
     getEl('btn-close-checkout')?.addEventListener('click', closeCheckoutModal);
     getEl('btn-cancel-checkout')?.addEventListener('click', closeCheckoutModal);
+    getEl('btn-razorpay-checkout')?.addEventListener('click', handleRazorpayCheckout);
 
-    getEl('btn-confirm-checkout')?.addEventListener('click', () => {
+    getEl('btn-confirm-checkout')?.addEventListener('click', async () => {
         if (!pendingCheckoutTier) return;
 
         const targetTier = pendingCheckoutTier;
         const tierInfo = TIER_DETAILS[targetTier];
         if (!tierInfo) return;
 
-        state.currentTier = targetTier;
-        state.creditsTotal = targetTier === 'pro' ? 1000 : targetTier === 'enterprise' ? 10000 : 100;
+        const btn = getEl('btn-confirm-checkout');
+        const origBtnHtml = btn ? btn.innerHTML : '';
+        if (btn) {
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Activating Plan...';
+        }
 
-        const now = new Date();
-        state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
+        try {
+            if (state.serverConnected && state.apiBaseUrl) {
+                try {
+                    const res = await fetch(`${state.apiBaseUrl}/api/payment/create-checkout`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            tier: targetTier,
+                            billingCycle: state.billingCycle || 'monthly',
+                            returnUrl: window.location.origin + '/plans',
+                            email: state.user?.email,
+                        }),
+                    });
+
+                    const rawText = await res.text();
+                    const data = JSON.parse(rawText);
+                    if (data && data.success && data.checkoutUrl) {
+                        btn.innerHTML = '<i class="fa-brands fa-paypal"></i> Redirecting to PayPal...';
+                        window.location.href = data.checkoutUrl;
+                        return;
+                    }
+                } catch { }
+            }
 
-        saveSessionToStorage();
-        syncAuthWithServer();
-        closeCheckoutModal();
-        renderCreditUsageUI();
-        renderTiersUI();
-        updateUserUI();
-        showToast(`Subscription activated! Welcome to ${tierInfo.name}. Quota upgraded to ${state.creditsTotal.toLocaleString()} credits.`, 'success');
+            // Standalone Cloud Web Mode: Instant activation & upgrade without localhost
+            setTimeout(() => {
+                const txId = 'PAYID-' + Math.random().toString(36).substring(2, 11).toUpperCase();
+                applyTierUpgrade(targetTier, txId);
+            }, 600);
+        } catch (err) {
+            showToast(err.message || 'Payment processing failed.', 'error');
+            if (btn) {
+                btn.disabled = false;
+                btn.innerHTML = origBtnHtml;
+            }
+        }
     });
 
     // Password Visibility Toggle Buttons
@@ -461,7 +785,7 @@ function initTerminalSimulator() {
 `;
         } else if (lower.includes('status')) {
             response.innerHTML = `
-<span class="term-green">✔ Scout CLI Engine: v8.0.4 Online</span><br>
+<span class="term-green">✔ Scout CLI Engine: v8.0.6 Online</span><br>
 ↳ User: <strong>${escapeHtml(state.user ? state.user.name : 'Guest Session')}</strong><br>
 ↳ Active Subscription: <strong>${escapeHtml(TIER_DETAILS[state.currentTier].name)}</strong><br>
 ↳ Credit Quota: <strong>${state.byokEnabled ? 'BYOK Mode (Unlimited)' : `${state.creditsUsed} / ${state.creditsTotal} Credits Used`}</strong><br>
@@ -545,9 +869,9 @@ function renderSessionsTable() {
  </div>
  </td>
  <td><span class="badge badge-success">${escapeHtml(timeAgo(sess.lastActive))}</span></td>
- <td><code>${escapeHtml(sess.ip)}</code></td>
- <td><button class="btn btn-xs btn-outline text-danger btn-revoke-session" onclick="revokeSession('${escapeHtml(sess.id)}')"><i class="fa-solid fa-trash"></i> Revoke</button></td>
- </tr>
+                <td><code>${escapeHtml(sess.ip)}</code></td>
+                <td><button class="btn btn-xs btn-outline text-danger btn-revoke-session" data-session-id="${escapeHtml(sess.id)}" onclick="revokeSession('${escapeHtml(sess.id)}')"><i class="fa-solid fa-trash"></i> Revoke</button></td>
+            </tr>
  `;
         })
         .join('');
@@ -691,28 +1015,33 @@ async function checkServerStatusAndSession() {
     let connected = false;
     let data = null;
 
-    try {
-        const res = await fetch('/api/status', { method: 'GET' });
-        if (res.ok) {
-            data = await res.json();
-            if (data && data.status === 'ok') {
-                state.apiBaseUrl = '';
-                connected = true;
-            }
-        }
-    } catch { }
+    // Only attempt local server if running locally
+    const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
 
-    if (!connected) {
+    if (isLocalhost) {
         try {
-            const res = await fetch('http://localhost:9120/api/status', { method: 'GET' });
+            const res = await fetch('/api/status', { method: 'GET' });
             if (res.ok) {
                 data = await res.json();
                 if (data && data.status === 'ok') {
-                    state.apiBaseUrl = 'http://localhost:9120';
+                    state.apiBaseUrl = '';
                     connected = true;
                 }
             }
         } catch { }
+
+        if (!connected) {
+            try {
+                const res = await fetch('http://localhost:9120/api/status', { method: 'GET' });
+                if (res.ok) {
+                    data = await res.json();
+                    if (data && data.status === 'ok') {
+                        state.apiBaseUrl = 'http://localhost:9120';
+                        connected = true;
+                    }
+                }
+            } catch { }
+        }
     }
 
     if (connected && data) {
@@ -1138,6 +1467,12 @@ document.addEventListener('click', (e) => {
         const cmdText = getEl('terminal-cmd-display')?.innerText || 'npx -y ft-scout@latest';
         copyText(cmdText, 'CLI Command copied to clipboard!');
     }
+
+    const revokeBtn = e.target.closest('.btn-revoke-session');
+    if (revokeBtn) {
+        const sessionId = revokeBtn.dataset.sessionId || revokeBtn.closest('tr')?.dataset?.id;
+        if (sessionId) revokeSession(sessionId);
+    }
 });
 
 // Toast System

package/web/styles.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Design System & Visual Engine v8.0.4
+   FrontTerrain Scout — Design System & Visual Engine v8.0.6
    Inspired by HappyRobot, Linear.app & Vercel aesthetics
    ========================================================================== */
 
@@ -1063,7 +1063,7 @@ h1, h2, h3, h4, h5, h6 {
 .footer-links a:hover { color: var(--hr-rust); }
 
 /* ==========================================================================
-   Visual Perception & Live Screen Sharing Engine v8.0.4
+   Visual Perception & Live Screen Sharing Engine v8.0.6
    ========================================================================== */
 .vision-banner {
   margin-bottom: 28px;