django-cfg 1.4.21__py3-none-any.whl → 1.4.23__py3-none-any.whl

django_cfg/apps/payments/admin_interface/templates/payments/base.html

@@ -6,7 +6,7 @@
 {# Navbar configuration #}
 {% block header %}
 {% with navbar_items=payment_nav_items %}
-{% include 'django_tailwind/components/navbar.html' with title="Payment Admin" icon='<span class="material-icons-outlined text-blue-600">payment</span>' nav_items=navbar_items %}
+{% include 'django_tailwind/components/navbar.html' with title="Payment Admin" icon='<span class="material-icons-outlined text-blue-600">payment</span>' nav_items=navbar_items full_width=True %}
 {% endwith %}
 {% endblock %}
 
@@ -54,7 +54,411 @@
 {% endblock %}
 
 {% block extra_js %}
-<!-- Payment System JS Components -->
-<script src="{% static 'payments/js/api-client.js' %}"></script>
+<!-- Load and initialize components BEFORE Alpine starts -->
+<script type="module">
+try {
+    console.log('🔄 Starting PaymentAPI module import...');
+    const { loadAPI, showNotification } = await import('/static/js/api-loader.mjs');
+
+    // Load payments API
+    const paymentsAPI = await loadAPI('payments');
+    console.log('✅ PaymentAPI module imported successfully:', paymentsAPI);
+
+    // Make it available globally as PaymentAPI for backward compatibility
+    window.PaymentAPI = paymentsAPI;
+    window.showNotification = showNotification;
+
+    // Add utility functions that were in the old api-client.js
+    window.PaymentAPI.utils = {
+        showNotification,
+
+        copyToClipboard: async (text) => {
+            try {
+                await navigator.clipboard.writeText(text);
+                showNotification('Copied to clipboard!', 'success');
+            } catch (error) {
+                console.error('Failed to copy:', error);
+                showNotification('Failed to copy', 'error');
+            }
+        },
+
+    formatDate: (dateString) => {
+        if (!dateString) return 'N/A';
+        const date = new Date(dateString);
+        const now = new Date();
+        const diff = now - date;
+        const seconds = Math.floor(diff / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+
+        if (days > 7) {
+            return date.toLocaleDateString();
+        } else if (days > 0) {
+            return `${days} day${days > 1 ? 's' : ''} ago`;
+        } else if (hours > 0) {
+            return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        } else if (minutes > 0) {
+            return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+        } else {
+            return 'Just now';
+        }
+    }
+};
+
+// Map generated methods to expected names for compatibility
+window.PaymentAPI.dashboard = {
+    overview: () => paymentsAPI.paymentsOverviewDashboardOverviewRetrieve(),
+    metrics: () => paymentsAPI.paymentsOverviewDashboardMetricsRetrieve(),
+    recentPayments: (limit) => paymentsAPI.paymentsOverviewDashboardRecentPaymentsList({ limit }),
+    chartData: (period) => paymentsAPI.paymentsOverviewDashboardChartDataRetrieve({ period })
+};
+
+window.PaymentAPI.admin = {
+    payments: {
+        list: (params) => paymentsAPI.paymentsAdminApiPaymentsList(params),
+        get: (paymentId) => paymentsAPI.paymentsAdminApiPaymentsRetrieve(paymentId),
+        create: (data) => paymentsAPI.paymentsAdminApiPaymentsCreate(data),
+        cancel: (paymentId) => paymentsAPI.paymentsAdminApiPaymentsCancelCreate(paymentId),
+        refreshStatus: (paymentId) => paymentsAPI.paymentsAdminApiPaymentsRefreshStatusCreate(paymentId)
+    },
+    users: {
+        list: (params) => paymentsAPI.paymentsAdminApiUsersList(params)
+    }
+};
+
+window.PaymentAPI.currencies = {
+    supported: () => paymentsAPI.paymentsCurrenciesSupportedRetrieve(),
+    // byProvider uses query params via filterset_fields, so we need custom implementation
+    byProvider: async (provider) => {
+        const path = `/cfg/payments/provider-currencies/by_provider/`;
+        const queryString = provider ? `?provider=${provider}` : '';
+        const response = await fetch(path + queryString, {
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            credentials: 'same-origin'
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+    },
+    // convert method - custom implementation to fix generated client bug
+    convert: async (from, to, amount) => {
+        const path = `/cfg/payments/currencies/convert/`;
+        const response = await fetch(path, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
+            },
+            credentials: 'same-origin',
+            body: JSON.stringify({
+                from_currency: from,
+                to_currency: to,
+                amount: amount
+            })
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+    }
+};
+
+    // PaymentAPI is ready
+    console.log('✅ PaymentAPI loaded from generated MJS client');
+} catch (error) {
+    console.error('❌ Failed to load PaymentAPI module:', error);
+    console.error('Error stack:', error.stack);
+    window.PaymentAPI = null;
+}
+</script>
+
+<!-- Register Alpine components - MUST be non-module script to run before Alpine -->
+<script>
+document.addEventListener('alpine:init', () => {
+    console.log('🔧 Alpine:init - registering components...');
+
+    // Register components directly using Alpine.data
+    Alpine.data('paymentDashboardComponent', () => ({
+        loading: true,
+        recentPayments: [],
+        recentActivity: [],
+        stats: { total: 0, successful: 0, pending: 0, failed: 0 },
+
+        init() {
+            this.waitForDependencies();
+        },
+
+        async waitForDependencies() {
+            const check = setInterval(async () => {
+                if (window.PaymentAPI && typeof paymentDashboard === 'function') {
+                    clearInterval(check);
+                    const data = paymentDashboard();
+
+                    // Copy all properties, methods, AND getters
+                    for (const key in data) {
+                        if (data.hasOwnProperty(key)) {
+                            const descriptor = Object.getOwnPropertyDescriptor(data, key);
+                            if (descriptor) {
+                                // Copy getters/setters
+                                if (descriptor.get || descriptor.set) {
+                                    Object.defineProperty(this, key, descriptor);
+                                } else {
+                                    // Copy regular properties/methods
+                                    this[key] = data[key];
+                                }
+                            }
+                        }
+                    }
+
+                    if (data.init) await data.init.call(this);
+                }
+            }, 50);
+        }
+    }));
+
+    Alpine.data('paymentDetailComponent', (paymentId) => ({
+        loading: false,
+        showQRCode: false,
+        paymentId: paymentId,
+
+        init() {
+            console.log('🔵 PaymentDetail init() called with paymentId:', this.paymentId);
+            this.waitForDependencies();
+        },
+
+        async waitForDependencies() {
+            console.log('⏳ PaymentDetail: Waiting for dependencies...');
+            let attempts = 0;
+            const check = setInterval(async () => {
+                attempts++;
+                const hasAPI = !!window.PaymentAPI;
+                const hasFunction = typeof paymentDetail === 'function';
+
+                if (attempts <= 3 || (attempts % 10 === 0)) {
+                    console.log(`⏳ Attempt ${attempts}: PaymentAPI=${hasAPI}, paymentDetail=${hasFunction}`);
+                }
+
+                if (hasAPI && hasFunction) {
+                    clearInterval(check);
+                    console.log('✅ PaymentDetail: Dependencies ready!');
+                    const data = paymentDetail();
+
+                    console.log('🔍 PaymentDetail: Copying methods from data:', Object.keys(data));
+
+                    // Copy all properties, methods, AND getters
+                    for (const key in data) {
+                        if (data.hasOwnProperty(key)) {
+                            const descriptor = Object.getOwnPropertyDescriptor(data, key);
+                            if (descriptor) {
+                                // Copy getters/setters
+                                if (descriptor.get || descriptor.set) {
+                                    Object.defineProperty(this, key, descriptor);
+                                } else {
+                                    // Copy regular properties/methods
+                                    this[key] = data[key];
+                                }
+                            }
+                        }
+                    }
+
+                    console.log('✅ PaymentDetail: Copied methods:', Object.keys(this).filter(k => typeof this[k] === 'function'));
+
+                    if (data.init) await data.init.call(this, this.paymentId);
+                }
+            }, 50);
+        }
+    }));
+
+    Alpine.data('paymentListComponent', () => ({
+        loading: false,
+        payments: [],
+        filters: { search: '', status: '' },
+        currentPage: 1,
+        pageSize: 10,
+
+        // Getters defined in Alpine for reactivity
+        get filteredPayments() {
+            let filtered = this.payments;
+
+            if (this.filters.search) {
+                const search = this.filters.search.toLowerCase();
+                filtered = filtered.filter(payment =>
+                    payment.id.toLowerCase().includes(search) ||
+                    payment.external_id?.toLowerCase().includes(search) ||
+                    payment.provider.toLowerCase().includes(search)
+                );
+            }
+
+            if (this.filters.status) {
+                filtered = filtered.filter(payment => payment.status === this.filters.status);
+            }
+
+            return filtered;
+        },
+
+        get paginatedPayments() {
+            const start = (this.currentPage - 1) * this.pageSize;
+            const end = start + this.pageSize;
+            return this.filteredPayments.slice(start, end);
+        },
+
+        init() {
+            this.waitForDependencies();
+        },
+
+        async waitForDependencies() {
+            const check = setInterval(async () => {
+                if (window.PaymentAPI && typeof paymentList === 'function') {
+                    clearInterval(check);
+                    const data = paymentList();
+
+                    console.log('🔄 PaymentList: Copying properties from:', Object.keys(data));
+
+                    // Copy only regular properties and methods (NOT getters)
+                    for (const key in data) {
+                        if (data.hasOwnProperty(key)) {
+                            const descriptor = Object.getOwnPropertyDescriptor(data, key);
+                            if (descriptor && !descriptor.get && !descriptor.set) {
+                                this[key] = data[key];
+                            }
+                        }
+                    }
+
+                    console.log('✅ PaymentList: All methods copied');
+                    if (data.init) await data.init.call(this);
+                }
+            }, 50);
+        }
+    }));
+
+    Alpine.data('paymentFormComponent', () => ({
+        loading: false,
+        loadingCurrencies: false,
+        errorMessage: '',
+        users: [],
+        providers: [],
+        currencies: [],
+        allCurrencies: [],
+        conversionResult: null,
+        form: {
+            amount_usd: '',
+            user: '',
+            provider: 'nowpayments',
+            currency_code: '',
+            description: '',
+            callback_url: '',
+            cancel_url: ''
+        },
+
+        // Stub function to prevent Alpine errors before real component loads
+        getCurrencyInfo(code) {
+            return this.currencies.find(c => c.provider_currency_code === code) ||
+                   this.allCurrencies.find(c => c.code === code) ||
+                   { provider_currency_code: code, currency: { code, name: code, currency_type: 'unknown' } };
+        },
+
+        async init() {
+            // Wait for both PaymentAPI and paymentForm to be ready
+            const check = setInterval(async () => {
+                if (window.PaymentAPI && typeof paymentForm === 'function') {
+                    clearInterval(check);
+
+                    console.log('🔄 PaymentForm: Dependencies ready, initializing...');
+
+                    // Get the real component
+                    const realComponent = paymentForm();
+
+                    // Copy all properties, methods, AND getters from real component
+                    for (const key in realComponent) {
+                        if (realComponent.hasOwnProperty(key) && key !== 'init') {
+                            const descriptor = Object.getOwnPropertyDescriptor(realComponent, key);
+                            if (descriptor) {
+                                // Copy getters/setters
+                                if (descriptor.get || descriptor.set) {
+                                    Object.defineProperty(this, key, descriptor);
+                                } else {
+                                    // Copy regular properties/methods
+                                    this[key] = realComponent[key];
+                                }
+                            }
+                        }
+                    }
+
+                    // Now call the real init
+                    if (realComponent.init) {
+                        await realComponent.init.call(this);
+                    }
+                }
+            }, 50);
+        }
+    }));
+
+    Alpine.data('webhookDashboardComponent', () => ({
+        loading: false,
+        events: [],
+        filters: { event_type: '', status: '' },
+        stats: { total: 0, successful: 0, failed: 0, successRate: 0 },
+        testForm: { url: '', event_type: '' },
+        testLoading: false,
+        showEventModal: false,
+        selectedEvent: null,
+
+        // API getter defined in Alpine to access window.PaymentAPI
+        get api() {
+            return window.PaymentAPI;
+        },
+
+        // Getter defined in Alpine for reactivity
+        get filteredEvents() {
+            let filtered = this.events;
+
+            if (this.filters.event_type) {
+                filtered = filtered.filter(event => event.event_type === this.filters.event_type);
+            }
+
+            if (this.filters.status) {
+                filtered = filtered.filter(event => event.status === this.filters.status);
+            }
+
+            return filtered;
+        },
+
+        init() {
+            this.waitForDependencies();
+        },
+
+        async waitForDependencies() {
+            const check = setInterval(async () => {
+                if (window.PaymentAPI && typeof webhookDashboard === 'function') {
+                    clearInterval(check);
+                    const data = webhookDashboard();
+
+                    // Copy only regular properties and methods (NOT getters)
+                    for (const key in data) {
+                        if (data.hasOwnProperty(key)) {
+                            const descriptor = Object.getOwnPropertyDescriptor(data, key);
+                            if (descriptor && !descriptor.get && !descriptor.set) {
+                                this[key] = data[key];
+                            }
+                        }
+                    }
+
+                    if (data.init) await data.init.call(this);
+                }
+            }, 50);
+        }
+    }));
+
+    console.log('✅ All payment Alpine components registered');
+});
+</script>
+
+<!-- Ngrok status component -->
 <script src="{% static 'payments/js/ngrok-status.js' %}"></script>
 {% endblock %}

django_cfg/apps/payments/admin_interface/templates/payments/components/ngrok_status.html

@@ -128,12 +128,17 @@ function ngrokStatus() {
         async refreshStatus() {
             this.loading = true;
             try {
-                const response = await fetch('/cfg/admin/django_cfg_payments/admin/ngrok/status/');
-                if (response.ok) {
-                    this.status = await response.json();
-                }
+                // Since webhook health endpoint doesn't exist, just show as inactive
+                // Ngrok status can only be checked when running with runserver_ngrok
+                this.status = {
+                    active: false,
+                    public_url: '',
+                    webhook_url: '',
+                    error: 'Ngrok tunnel not active. Run server with: python manage.py runserver_ngrok'
+                };
             } catch (error) {
                 console.error('Failed to fetch ngrok status:', error);
+                this.status.error = 'Unable to check ngrok status';
             } finally {
                 this.loading = false;
             }
@@ -142,15 +147,10 @@ function ngrokStatus() {
         async startTunnel() {
             this.loading = true;
             try {
-                const response = await fetch('/cfg/admin/django_cfg_payments/admin/ngrok/start/', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
-                    }
-                });
-                if (response.ok) {
-                    await this.refreshStatus();
-                }
+                // This functionality is not available via API
+                // Ngrok must be started via manage.py runserver_ngrok
+                console.warn('Ngrok tunnel must be started via manage.py runserver_ngrok');
+                alert('Please restart your server with: python manage.py runserver_ngrok');
             } catch (error) {
                 console.error('Failed to start ngrok:', error);
             } finally {

django_cfg/apps/payments/admin_interface/templates/payments/payment_dashboard.html

@@ -7,7 +7,8 @@
 {% block page_subtitle %}Overview of payment system status and metrics{% endblock %}
 
 {% block content %}
-<div x-data="paymentDashboard()" x-init="init()">
+<!-- Dashboard will be initialized after scripts load -->
+<div id="payment-dashboard-container" x-data="paymentDashboardComponent">
     <!-- Stats Cards -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         <!-- Total Payments -->
@@ -169,5 +170,8 @@
 {% endblock %}
 
 {% block extra_js %}
+{{ block.super }}
+
+<!-- Load payment dashboard script -->
 <script src="{% static 'payments/js/payment-dashboard.js' %}"></script>
 {% endblock %}