fix: use apiClient instead of raw fetch in billing.js

Replaced custom apiGet/apiPost/apiDelete methods with apiClient calls.
The apiClient automatically handles JWT authentication from cookies,
fixing 401 Unauthorized errors on billing API endpoints.

Also replaced showNotification with Utils.showToast for consistency
with JS-009 architecture rule.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/vendor/js/billing.js

@@ -52,11 +52,11 @@ function vendorBilling() {
             try {
                 // Load all data in parallel
                 const [subscriptionRes, tiersRes, addonsRes, myAddonsRes, invoicesRes] = await Promise.all([
-                    this.apiGet('/billing/subscription'),
+                    apiClient.get('/vendor/billing/subscription'),
-                    this.apiGet('/billing/tiers'),
+                    apiClient.get('/vendor/billing/tiers'),
-                    this.apiGet('/billing/addons'),
+                    apiClient.get('/vendor/billing/addons'),
-                    this.apiGet('/billing/my-addons'),
+                    apiClient.get('/vendor/billing/my-addons'),
-                    this.apiGet('/billing/invoices?limit=5'),
+                    apiClient.get('/vendor/billing/invoices?limit=5'),
                 ]);
 
                 this.subscription = subscriptionRes;
@@ -67,7 +67,7 @@ function vendorBilling() {
 
             } catch (error) {
                 billingLog.error('Error loading billing data:', error);
-                this.showNotification('Failed to load billing data', 'error');
+                Utils.showToast('Failed to load billing data', 'error');
             } finally {
                 this.loading = false;
             }
@@ -77,7 +77,7 @@ function vendorBilling() {
             if (tier.is_current) return;
 
             try {
-                const response = await this.apiPost('/billing/checkout', {
+                const response = await apiClient.post('/vendor/billing/checkout', {
                     tier_code: tier.code,
                     is_annual: false
                 });
@@ -87,55 +87,55 @@ function vendorBilling() {
                 }
             } catch (error) {
                 billingLog.error('Error creating checkout:', error);
-                this.showNotification('Failed to create checkout session', 'error');
+                Utils.showToast('Failed to create checkout session', 'error');
             }
         },
 
         async openPortal() {
             try {
-                const response = await this.apiPost('/billing/portal', {});
+                const response = await apiClient.post('/vendor/billing/portal', {});
                 if (response.portal_url) {
                     window.location.href = response.portal_url;
                 }
             } catch (error) {
                 billingLog.error('Error opening portal:', error);
-                this.showNotification('Failed to open payment portal', 'error');
+                Utils.showToast('Failed to open payment portal', 'error');
             }
         },
 
         async cancelSubscription() {
             try {
-                await this.apiPost('/billing/cancel', {
+                await apiClient.post('/vendor/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');
+                Utils.showToast('Subscription cancelled. You have access until the end of your billing period.', 'success');
                 await this.loadData();
 
             } catch (error) {
                 billingLog.error('Error cancelling subscription:', error);
-                this.showNotification('Failed to cancel subscription', 'error');
+                Utils.showToast('Failed to cancel subscription', 'error');
             }
         },
 
         async reactivate() {
             try {
-                await this.apiPost('/billing/reactivate', {});
+                await apiClient.post('/vendor/billing/reactivate', {});
-                this.showNotification('Subscription reactivated!', 'success');
+                Utils.showToast('Subscription reactivated!', 'success');
                 await this.loadData();
 
             } catch (error) {
                 billingLog.error('Error reactivating subscription:', error);
-                this.showNotification('Failed to reactivate subscription', 'error');
+                Utils.showToast('Failed to reactivate subscription', 'error');
             }
         },
 
         async purchaseAddon(addon) {
             this.purchasingAddon = addon.code;
             try {
-                const response = await this.apiPost('/billing/addons/purchase', {
+                const response = await apiClient.post('/vendor/billing/addons/purchase', {
                     addon_code: addon.code,
                     quantity: 1
                 });
@@ -145,7 +145,7 @@ function vendorBilling() {
                 }
             } catch (error) {
                 billingLog.error('Error purchasing addon:', error);
-                this.showNotification('Failed to purchase add-on', 'error');
+                Utils.showToast('Failed to purchase add-on', 'error');
             } finally {
                 this.purchasingAddon = null;
             }
@@ -157,12 +157,12 @@ function vendorBilling() {
             }
 
             try {
-                await this.apiDelete(`/billing/addons/${addon.id}`);
+                await apiClient.delete(`/vendor/billing/addons/${addon.id}`);
-                this.showNotification('Add-on cancelled successfully', 'success');
+                Utils.showToast('Add-on cancelled successfully', 'success');
                 await this.loadData();
             } catch (error) {
                 billingLog.error('Error cancelling addon:', error);
-                this.showNotification('Failed to cancel add-on', 'error');
+                Utils.showToast('Failed to cancel add-on', 'error');
             }
         },
 
@@ -171,57 +171,6 @@ function vendorBilling() {
             return this.myAddons.some(a => a.addon_code === addonCode && a.status === 'active');
         },
 
-        // 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();
-        },
-
-        async apiDelete(endpoint) {
-            const response = await fetch(`/api/v1/vendor${endpoint}`, {
-                method: 'DELETE',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                credentials: 'include'
-            });
-
-            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 '-';
@@ -240,17 +189,6 @@ function vendorBilling() {
                 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);
-            }
         }
     };
 }