orion/static/vendor/js/billing.js

// static/vendor/js/billing.js
// Vendor billing and subscription management

function billingData() {
    return {
        // State
        loading: true,
        subscription: null,
        tiers: [],
        addons: [],
        myAddons: [],
        invoices: [],

        // UI state
        showTiersModal: false,
        showAddonsModal: false,
        showCancelModal: false,
        showSuccessMessage: false,
        showCancelMessage: false,
        cancelReason: '',

        // Initialize
        async init() {
            // Check URL params for success/cancel
            const params = new URLSearchParams(window.location.search);
            if (params.get('success') === 'true') {
                this.showSuccessMessage = true;
                // Clean URL
                window.history.replaceState({}, document.title, window.location.pathname);
            }
            if (params.get('cancelled') === 'true') {
                this.showCancelMessage = true;
                window.history.replaceState({}, document.title, window.location.pathname);
            }

            await this.loadData();
        },

        async loadData() {
            this.loading = true;
            try {
                // Load all data in parallel
                const [subscriptionRes, tiersRes, addonsRes, invoicesRes] = await Promise.all([
                    this.apiGet('/billing/subscription'),
                    this.apiGet('/billing/tiers'),
                    this.apiGet('/billing/addons'),
                    this.apiGet('/billing/invoices?limit=5'),
                ]);

                this.subscription = subscriptionRes;
                this.tiers = tiersRes.tiers || [];
                this.addons = addonsRes || [];
                this.invoices = invoicesRes.invoices || [];

            } catch (error) {
                console.error('Error loading billing data:', error);
                this.showNotification('Failed to load billing data', 'error');
            } finally {
                this.loading = false;
            }
        },

        async selectTier(tier) {
            if (tier.is_current) return;

            try {
                const response = await this.apiPost('/billing/checkout', {
                    tier_code: tier.code,
                    is_annual: false
                });

                if (response.checkout_url) {
                    window.location.href = response.checkout_url;
                }
            } catch (error) {
                console.error('Error creating checkout:', error);
                this.showNotification('Failed to create checkout session', 'error');
            }
        },

        async openPortal() {
            try {
                const response = await this.apiPost('/billing/portal', {});
                if (response.portal_url) {
                    window.location.href = response.portal_url;
                }
            } catch (error) {
                console.error('Error opening portal:', error);
                this.showNotification('Failed to open payment portal', 'error');
            }
        },

        async cancelSubscription() {
            try {
                await this.apiPost('/billing/cancel', {
                    reason: this.cancelReason,
                    immediately: false
                });

                this.showCancelModal = false;
                this.showNotification('Subscription cancelled. You have access until the end of your billing period.', 'success');
                await this.loadData();

            } catch (error) {
                console.error('Error cancelling subscription:', error);
                this.showNotification('Failed to cancel subscription', 'error');
            }
        },

        async reactivate() {
            try {
                await this.apiPost('/billing/reactivate', {});
                this.showNotification('Subscription reactivated!', 'success');
                await this.loadData();

            } catch (error) {
                console.error('Error reactivating subscription:', error);
                this.showNotification('Failed to reactivate subscription', 'error');
            }
        },

        // API helpers
        async apiGet(endpoint) {
            const response = await fetch(`/api/v1/vendor${endpoint}`, {
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include'
            });

            if (!response.ok) {
                throw new Error(`API error: ${response.status}`);
            }

            return response.json();
        },

        async apiPost(endpoint, data) {
            const response = await fetch(`/api/v1/vendor${endpoint}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify(data)
            });

            if (!response.ok) {
                const error = await response.json().catch(() => ({}));
                throw new Error(error.detail || `API error: ${response.status}`);
            }

            return response.json();
        },

        // Formatters
        formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        },

        formatCurrency(cents, currency = 'EUR') {
            if (cents === null || cents === undefined) return '-';
            const amount = cents / 100;
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: currency
            }).format(amount);
        },

        showNotification(message, type = 'info') {
            // Use Alpine's $dispatch if available, or fallback to alert
            if (window.Alpine) {
                window.dispatchEvent(new CustomEvent('show-notification', {
                    detail: { message, type }
                }));
            } else {
                alert(message);
            }
        }
    };
}