refactor(js): migrate JavaScript files to module directories
Move 47 JS files from static/{admin,vendor,shared}/js/ to their
respective module directories app/modules/*/static/*/js/:
- Orders: orders.js, order-detail.js
- Catalog: products.js (renamed from vendor-products.js), product-*.js
- Inventory: inventory.js (admin & vendor)
- Customers: customers.js, users.js, user-*.js
- Billing: billing-history.js, subscriptions.js, subscription-tiers.js,
billing.js, invoices.js, feature-store.js, upgrade-prompts.js
- Messaging: messages.js, notifications.js, email-templates.js
- Marketplace: marketplace*.js, letzshop*.js, onboarding.js
- Monitoring: monitoring.js, background-tasks.js, imports.js, logs.js
- Dev Tools: testing-*.js, code-quality-*.js
Update 39 templates to reference new module static paths using
url_for('{module}_static', path='...') pattern.
Files staying in static/ (platform core):
- admin: dashboard, login, platforms, vendors, companies, admin-users,
settings, components, init-alpine, module-config
- vendor: dashboard, login, profile, settings, team, media, init-alpine
- shared: api-client, utils, money, icons, log-config, vendor-selector,
media-picker
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
211
app/modules/billing/static/vendor/js/billing.js
vendored
Normal file
211
app/modules/billing/static/vendor/js/billing.js
vendored
Normal file
@@ -0,0 +1,211 @@
|
||||
// app/modules/billing/static/vendor/js/billing.js
|
||||
// Vendor billing and subscription management
|
||||
|
||||
const billingLog = window.LogConfig?.createLogger('BILLING') || console;
|
||||
|
||||
function vendorBilling() {
|
||||
return {
|
||||
// Inherit base data (dark mode, sidebar, vendor info, etc.)
|
||||
...data(),
|
||||
currentPage: 'billing',
|
||||
|
||||
// State
|
||||
loading: true,
|
||||
subscription: null,
|
||||
tiers: [],
|
||||
addons: [],
|
||||
myAddons: [],
|
||||
invoices: [],
|
||||
|
||||
// UI state
|
||||
showTiersModal: false,
|
||||
showAddonsModal: false,
|
||||
showCancelModal: false,
|
||||
showSuccessMessage: false,
|
||||
showCancelMessage: false,
|
||||
showAddonSuccessMessage: false,
|
||||
cancelReason: '',
|
||||
purchasingAddon: null,
|
||||
|
||||
// Initialize
|
||||
async init() {
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorBillingInitialized) return;
|
||||
window._vendorBillingInitialized = true;
|
||||
|
||||
// IMPORTANT: Call parent init first to set vendorCode from URL
|
||||
const parentInit = data().init;
|
||||
if (parentInit) {
|
||||
await parentInit.call(this);
|
||||
}
|
||||
|
||||
try {
|
||||
// Check URL params for success/cancel
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.get('success') === 'true') {
|
||||
this.showSuccessMessage = true;
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
if (params.get('cancelled') === 'true') {
|
||||
this.showCancelMessage = true;
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
if (params.get('addon_success') === 'true') {
|
||||
this.showAddonSuccessMessage = true;
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
|
||||
await this.loadData();
|
||||
} catch (error) {
|
||||
billingLog.error('Failed to initialize billing page:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
// Load all data in parallel
|
||||
const [subscriptionRes, tiersRes, addonsRes, myAddonsRes, invoicesRes] = await Promise.all([
|
||||
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;
|
||||
this.tiers = tiersRes.tiers || [];
|
||||
this.addons = addonsRes || [];
|
||||
this.myAddons = myAddonsRes || [];
|
||||
this.invoices = invoicesRes.invoices || [];
|
||||
|
||||
} catch (error) {
|
||||
billingLog.error('Error loading billing data:', error);
|
||||
Utils.showToast('Failed to load billing data', 'error');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async selectTier(tier) {
|
||||
if (tier.is_current) return;
|
||||
|
||||
try {
|
||||
const response = await apiClient.post('/vendor/billing/checkout', {
|
||||
tier_code: tier.code,
|
||||
is_annual: false
|
||||
});
|
||||
|
||||
if (response.checkout_url) {
|
||||
window.location.href = response.checkout_url;
|
||||
}
|
||||
} catch (error) {
|
||||
billingLog.error('Error creating checkout:', error);
|
||||
Utils.showToast('Failed to create checkout session', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async openPortal() {
|
||||
try {
|
||||
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);
|
||||
Utils.showToast('Failed to open payment portal', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async cancelSubscription() {
|
||||
try {
|
||||
await apiClient.post('/vendor/billing/cancel', {
|
||||
reason: this.cancelReason,
|
||||
immediately: false
|
||||
});
|
||||
|
||||
this.showCancelModal = false;
|
||||
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);
|
||||
Utils.showToast('Failed to cancel subscription', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async reactivate() {
|
||||
try {
|
||||
await apiClient.post('/vendor/billing/reactivate', {});
|
||||
Utils.showToast('Subscription reactivated!', 'success');
|
||||
await this.loadData();
|
||||
|
||||
} catch (error) {
|
||||
billingLog.error('Error reactivating subscription:', error);
|
||||
Utils.showToast('Failed to reactivate subscription', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async purchaseAddon(addon) {
|
||||
this.purchasingAddon = addon.code;
|
||||
try {
|
||||
const response = await apiClient.post('/vendor/billing/addons/purchase', {
|
||||
addon_code: addon.code,
|
||||
quantity: 1
|
||||
});
|
||||
|
||||
if (response.checkout_url) {
|
||||
window.location.href = response.checkout_url;
|
||||
}
|
||||
} catch (error) {
|
||||
billingLog.error('Error purchasing addon:', error);
|
||||
Utils.showToast('Failed to purchase add-on', 'error');
|
||||
} finally {
|
||||
this.purchasingAddon = null;
|
||||
}
|
||||
},
|
||||
|
||||
async cancelAddon(addon) {
|
||||
if (!confirm(`Are you sure you want to cancel ${addon.addon_name}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
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);
|
||||
Utils.showToast('Failed to cancel add-on', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// Check if addon is already purchased
|
||||
isAddonPurchased(addonCode) {
|
||||
return this.myAddons.some(a => a.addon_code === addonCode && a.status === 'active');
|
||||
},
|
||||
|
||||
// Formatters
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
return date.toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
},
|
||||
|
||||
formatCurrency(cents, currency = 'EUR') {
|
||||
if (cents === null || cents === undefined) return '-';
|
||||
const amount = cents / 100;
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
const currencyCode = window.VENDOR_CONFIG?.currency || currency;
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency: currencyCode
|
||||
}).format(amount);
|
||||
}
|
||||
};
|
||||
}
|
||||
404
app/modules/billing/static/vendor/js/invoices.js
vendored
Normal file
404
app/modules/billing/static/vendor/js/invoices.js
vendored
Normal file
@@ -0,0 +1,404 @@
|
||||
// app/modules/billing/static/vendor/js/invoices.js
|
||||
/**
|
||||
* Vendor invoice management page logic
|
||||
*/
|
||||
|
||||
const invoicesLog = window.LogConfig?.createLogger('INVOICES') || console;
|
||||
|
||||
invoicesLog.info('[VENDOR INVOICES] Loading...');
|
||||
|
||||
function vendorInvoices() {
|
||||
invoicesLog.info('[VENDOR INVOICES] vendorInvoices() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'invoices',
|
||||
|
||||
// Tab state
|
||||
activeTab: 'invoices',
|
||||
|
||||
// Loading states
|
||||
loading: false,
|
||||
savingSettings: false,
|
||||
creatingInvoice: false,
|
||||
downloadingPdf: false,
|
||||
|
||||
// Messages
|
||||
error: '',
|
||||
successMessage: '',
|
||||
|
||||
// Settings
|
||||
hasSettings: false,
|
||||
settings: null,
|
||||
settingsForm: {
|
||||
company_name: '',
|
||||
company_address: '',
|
||||
company_city: '',
|
||||
company_postal_code: '',
|
||||
company_country: 'LU',
|
||||
vat_number: '',
|
||||
invoice_prefix: 'INV',
|
||||
default_vat_rate: '17.00',
|
||||
bank_name: '',
|
||||
bank_iban: '',
|
||||
bank_bic: '',
|
||||
payment_terms: 'Net 30 days',
|
||||
footer_text: ''
|
||||
},
|
||||
|
||||
// Stats
|
||||
stats: {
|
||||
total_invoices: 0,
|
||||
total_revenue_cents: 0,
|
||||
draft_count: 0,
|
||||
issued_count: 0,
|
||||
paid_count: 0,
|
||||
cancelled_count: 0
|
||||
},
|
||||
|
||||
// Invoices list
|
||||
invoices: [],
|
||||
totalInvoices: 0,
|
||||
page: 1,
|
||||
perPage: 20,
|
||||
filters: {
|
||||
status: ''
|
||||
},
|
||||
|
||||
// Create invoice modal
|
||||
showCreateModal: false,
|
||||
createForm: {
|
||||
order_id: '',
|
||||
notes: ''
|
||||
},
|
||||
|
||||
async init() {
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorInvoicesInitialized) {
|
||||
return;
|
||||
}
|
||||
window._vendorInvoicesInitialized = true;
|
||||
|
||||
// Call parent init first to set vendorCode from URL
|
||||
const parentInit = data().init;
|
||||
if (parentInit) {
|
||||
await parentInit.call(this);
|
||||
}
|
||||
|
||||
await this.loadSettings();
|
||||
await this.loadStats();
|
||||
await this.loadInvoices();
|
||||
},
|
||||
|
||||
/**
|
||||
* Load invoice settings
|
||||
*/
|
||||
async loadSettings() {
|
||||
try {
|
||||
const response = await apiClient.get('/vendor/invoices/settings');
|
||||
if (response) {
|
||||
this.settings = response;
|
||||
this.hasSettings = true;
|
||||
// Populate form with existing settings
|
||||
this.settingsForm = {
|
||||
company_name: response.company_name || '',
|
||||
company_address: response.company_address || '',
|
||||
company_city: response.company_city || '',
|
||||
company_postal_code: response.company_postal_code || '',
|
||||
company_country: response.company_country || 'LU',
|
||||
vat_number: response.vat_number || '',
|
||||
invoice_prefix: response.invoice_prefix || 'INV',
|
||||
default_vat_rate: response.default_vat_rate?.toString() || '17.00',
|
||||
bank_name: response.bank_name || '',
|
||||
bank_iban: response.bank_iban || '',
|
||||
bank_bic: response.bank_bic || '',
|
||||
payment_terms: response.payment_terms || 'Net 30 days',
|
||||
footer_text: response.footer_text || ''
|
||||
};
|
||||
} else {
|
||||
this.hasSettings = false;
|
||||
}
|
||||
} catch (error) {
|
||||
// 404 means not configured yet, which is fine
|
||||
if (error.status !== 404) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to load settings:', error);
|
||||
}
|
||||
this.hasSettings = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load invoice statistics
|
||||
*/
|
||||
async loadStats() {
|
||||
try {
|
||||
const response = await apiClient.get('/vendor/invoices/stats');
|
||||
this.stats = {
|
||||
total_invoices: response.total_invoices || 0,
|
||||
total_revenue_cents: response.total_revenue_cents || 0,
|
||||
draft_count: response.draft_count || 0,
|
||||
issued_count: response.issued_count || 0,
|
||||
paid_count: response.paid_count || 0,
|
||||
cancelled_count: response.cancelled_count || 0
|
||||
};
|
||||
} catch (error) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to load stats:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load invoices list
|
||||
*/
|
||||
async loadInvoices() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: this.page.toString(),
|
||||
per_page: this.perPage.toString()
|
||||
});
|
||||
|
||||
if (this.filters.status) {
|
||||
params.append('status', this.filters.status);
|
||||
}
|
||||
|
||||
const response = await apiClient.get(`/vendor/invoices?${params}`);
|
||||
this.invoices = response.items || [];
|
||||
this.totalInvoices = response.total || 0;
|
||||
} catch (error) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to load invoices:', error);
|
||||
this.error = error.message || 'Failed to load invoices';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh all data
|
||||
*/
|
||||
async refreshData() {
|
||||
await this.loadSettings();
|
||||
await this.loadStats();
|
||||
await this.loadInvoices();
|
||||
this.successMessage = 'Data refreshed';
|
||||
setTimeout(() => this.successMessage = '', 3000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Save invoice settings
|
||||
*/
|
||||
async saveSettings() {
|
||||
if (!this.settingsForm.company_name) {
|
||||
this.error = 'Company name is required';
|
||||
return;
|
||||
}
|
||||
|
||||
this.savingSettings = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
company_name: this.settingsForm.company_name,
|
||||
company_address: this.settingsForm.company_address || null,
|
||||
company_city: this.settingsForm.company_city || null,
|
||||
company_postal_code: this.settingsForm.company_postal_code || null,
|
||||
company_country: this.settingsForm.company_country || 'LU',
|
||||
vat_number: this.settingsForm.vat_number || null,
|
||||
invoice_prefix: this.settingsForm.invoice_prefix || 'INV',
|
||||
default_vat_rate: parseFloat(this.settingsForm.default_vat_rate) || 17.0,
|
||||
bank_name: this.settingsForm.bank_name || null,
|
||||
bank_iban: this.settingsForm.bank_iban || null,
|
||||
bank_bic: this.settingsForm.bank_bic || null,
|
||||
payment_terms: this.settingsForm.payment_terms || null,
|
||||
footer_text: this.settingsForm.footer_text || null
|
||||
};
|
||||
|
||||
let response;
|
||||
if (this.hasSettings) {
|
||||
// Update existing settings
|
||||
response = await apiClient.put('/vendor/invoices/settings', payload);
|
||||
} else {
|
||||
// Create new settings
|
||||
response = await apiClient.post('/vendor/invoices/settings', payload);
|
||||
}
|
||||
|
||||
this.settings = response;
|
||||
this.hasSettings = true;
|
||||
this.successMessage = 'Settings saved successfully';
|
||||
} catch (error) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to save settings:', error);
|
||||
this.error = error.message || 'Failed to save settings';
|
||||
} finally {
|
||||
this.savingSettings = false;
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open create invoice modal
|
||||
*/
|
||||
openCreateModal() {
|
||||
if (!this.hasSettings) {
|
||||
this.error = 'Please configure invoice settings first';
|
||||
this.activeTab = 'settings';
|
||||
return;
|
||||
}
|
||||
this.createForm = {
|
||||
order_id: '',
|
||||
notes: ''
|
||||
};
|
||||
this.showCreateModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create invoice from order
|
||||
*/
|
||||
async createInvoice() {
|
||||
if (!this.createForm.order_id) {
|
||||
this.error = 'Please enter an order ID';
|
||||
return;
|
||||
}
|
||||
|
||||
this.creatingInvoice = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
order_id: parseInt(this.createForm.order_id),
|
||||
notes: this.createForm.notes || null
|
||||
};
|
||||
|
||||
const response = await apiClient.post('/vendor/invoices', payload);
|
||||
|
||||
this.showCreateModal = false;
|
||||
this.successMessage = `Invoice ${response.invoice_number} created successfully`;
|
||||
await this.loadStats();
|
||||
await this.loadInvoices();
|
||||
} catch (error) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to create invoice:', error);
|
||||
this.error = error.message || 'Failed to create invoice';
|
||||
} finally {
|
||||
this.creatingInvoice = false;
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update invoice status
|
||||
*/
|
||||
async updateStatus(invoice, newStatus) {
|
||||
const statusLabels = {
|
||||
'issued': 'mark as issued',
|
||||
'paid': 'mark as paid',
|
||||
'cancelled': 'cancel'
|
||||
};
|
||||
|
||||
if (!confirm(`Are you sure you want to ${statusLabels[newStatus] || newStatus} this invoice?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await apiClient.put(`/vendor/invoices/${invoice.id}/status`, {
|
||||
status: newStatus
|
||||
});
|
||||
|
||||
this.successMessage = `Invoice ${invoice.invoice_number} status updated to ${newStatus}`;
|
||||
await this.loadStats();
|
||||
await this.loadInvoices();
|
||||
} catch (error) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to update status:', error);
|
||||
this.error = error.message || 'Failed to update invoice status';
|
||||
}
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Download invoice PDF
|
||||
*/
|
||||
async downloadPDF(invoice) {
|
||||
this.downloadingPdf = true;
|
||||
|
||||
try {
|
||||
// Get the token for authentication
|
||||
const token = localStorage.getItem('wizamart_token') || localStorage.getItem('vendor_token');
|
||||
if (!token) {
|
||||
throw new Error('Not authenticated');
|
||||
}
|
||||
|
||||
// noqa: js-008 - File download needs response headers for filename
|
||||
const response = await fetch(`/api/v1/vendor/invoices/${invoice.id}/pdf`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.detail || 'Failed to download PDF');
|
||||
}
|
||||
|
||||
// Get filename from Content-Disposition header
|
||||
const contentDisposition = response.headers.get('Content-Disposition');
|
||||
let filename = `invoice-${invoice.invoice_number}.pdf`;
|
||||
if (contentDisposition) {
|
||||
const match = contentDisposition.match(/filename="(.+)"/);
|
||||
if (match) {
|
||||
filename = match[1];
|
||||
}
|
||||
}
|
||||
|
||||
// Download the file
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
this.successMessage = `Downloaded: ${filename}`;
|
||||
} catch (error) {
|
||||
invoicesLog.error('[VENDOR INVOICES] Failed to download PDF:', error);
|
||||
this.error = error.message || 'Failed to download PDF';
|
||||
} finally {
|
||||
this.downloadingPdf = false;
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
const date = new Date(dateStr);
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
return date.toLocaleDateString(locale, {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Format currency for display
|
||||
*/
|
||||
formatCurrency(cents, currency = 'EUR') {
|
||||
if (cents === null || cents === undefined) return 'N/A';
|
||||
const amount = cents / 100;
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
const currencyCode = window.VENDOR_CONFIG?.currency || currency;
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency: currencyCode
|
||||
}).format(amount);
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user