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>
This commit is contained in:
104
static/vendor/js/billing.js
vendored
104
static/vendor/js/billing.js
vendored
@@ -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'),
|
||||
this.apiGet('/billing/tiers'),
|
||||
this.apiGet('/billing/addons'),
|
||||
this.apiGet('/billing/my-addons'),
|
||||
this.apiGet('/billing/invoices?limit=5'),
|
||||
apiClient.get('/vendor/billing/subscription'),
|
||||
apiClient.get('/vendor/billing/tiers'),
|
||||
apiClient.get('/vendor/billing/addons'),
|
||||
apiClient.get('/vendor/billing/my-addons'),
|
||||
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', {});
|
||||
this.showNotification('Subscription reactivated!', 'success');
|
||||
await apiClient.post('/vendor/billing/reactivate', {});
|
||||
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}`);
|
||||
this.showNotification('Add-on cancelled successfully', 'success');
|
||||
await apiClient.delete(`/vendor/billing/addons/${addon.id}`);
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user