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:
357
app/modules/billing/static/admin/js/subscription-tiers.js
Normal file
357
app/modules/billing/static/admin/js/subscription-tiers.js
Normal file
@@ -0,0 +1,357 @@
|
||||
// app/modules/billing/static/admin/js/subscription-tiers.js
|
||||
// noqa: JS-003 - Uses ...baseData which is data() with safety check
|
||||
|
||||
const tiersLog = window.LogConfig?.loggers?.subscriptionTiers || window.LogConfig?.createLogger?.('subscriptionTiers') || console;
|
||||
|
||||
function adminSubscriptionTiers() {
|
||||
// Get base data with safety check for standalone usage
|
||||
const baseData = typeof data === 'function' ? data() : {};
|
||||
|
||||
return {
|
||||
// Inherit base layout functionality from init-alpine.js
|
||||
...baseData,
|
||||
|
||||
// Page-specific state
|
||||
currentPage: 'subscription-tiers',
|
||||
loading: true,
|
||||
error: null,
|
||||
successMessage: null,
|
||||
saving: false,
|
||||
|
||||
// Data
|
||||
tiers: [],
|
||||
stats: null,
|
||||
includeInactive: false,
|
||||
|
||||
// Feature management
|
||||
features: [],
|
||||
categories: [],
|
||||
featuresGrouped: {},
|
||||
selectedFeatures: [],
|
||||
selectedTierForFeatures: null,
|
||||
showFeaturePanel: false,
|
||||
loadingFeatures: false,
|
||||
savingFeatures: false,
|
||||
|
||||
// Sorting
|
||||
sortBy: 'display_order',
|
||||
sortOrder: 'asc',
|
||||
|
||||
// Modal state
|
||||
showModal: false,
|
||||
editingTier: null,
|
||||
formData: {
|
||||
code: '',
|
||||
name: '',
|
||||
description: '',
|
||||
price_monthly_cents: 0,
|
||||
price_annual_cents: null,
|
||||
orders_per_month: null,
|
||||
products_limit: null,
|
||||
team_members: null,
|
||||
display_order: 0,
|
||||
stripe_product_id: '',
|
||||
stripe_price_monthly_id: '',
|
||||
features: [],
|
||||
is_active: true,
|
||||
is_public: true
|
||||
},
|
||||
|
||||
async init() {
|
||||
// Guard against multiple initialization
|
||||
if (window._adminSubscriptionTiersInitialized) {
|
||||
tiersLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._adminSubscriptionTiersInitialized = true;
|
||||
|
||||
tiersLog.info('=== SUBSCRIPTION TIERS PAGE INITIALIZING ===');
|
||||
try {
|
||||
await Promise.all([
|
||||
this.loadTiers(),
|
||||
this.loadStats(),
|
||||
this.loadFeatures(),
|
||||
this.loadCategories()
|
||||
]);
|
||||
tiersLog.info('=== SUBSCRIPTION TIERS PAGE INITIALIZED ===');
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to initialize subscription tiers page:', error);
|
||||
this.error = 'Failed to load page data. Please refresh.';
|
||||
}
|
||||
},
|
||||
|
||||
async refresh() {
|
||||
this.error = null;
|
||||
this.successMessage = null;
|
||||
await this.loadTiers();
|
||||
await this.loadStats();
|
||||
},
|
||||
|
||||
async loadTiers() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.append('include_inactive', this.includeInactive);
|
||||
if (this.sortBy) params.append('sort_by', this.sortBy);
|
||||
if (this.sortOrder) params.append('sort_order', this.sortOrder);
|
||||
|
||||
const data = await apiClient.get(`/admin/subscriptions/tiers?${params}`);
|
||||
this.tiers = data.tiers || [];
|
||||
tiersLog.info(`Loaded ${this.tiers.length} tiers`);
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to load tiers:', error);
|
||||
this.error = error.message || 'Failed to load subscription tiers';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
handleSort(key) {
|
||||
if (this.sortBy === key) {
|
||||
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
this.sortBy = key;
|
||||
this.sortOrder = 'asc';
|
||||
}
|
||||
this.loadTiers();
|
||||
},
|
||||
|
||||
async loadStats() {
|
||||
try {
|
||||
const data = await apiClient.get('/admin/subscriptions/stats');
|
||||
this.stats = data;
|
||||
tiersLog.info('Loaded subscription stats');
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to load stats:', error);
|
||||
// Non-critical, don't show error
|
||||
}
|
||||
},
|
||||
|
||||
openCreateModal() {
|
||||
this.editingTier = null;
|
||||
this.formData = {
|
||||
code: '',
|
||||
name: '',
|
||||
description: '',
|
||||
price_monthly_cents: 0,
|
||||
price_annual_cents: null,
|
||||
orders_per_month: null,
|
||||
products_limit: null,
|
||||
team_members: null,
|
||||
display_order: this.tiers.length,
|
||||
stripe_product_id: '',
|
||||
stripe_price_monthly_id: '',
|
||||
features: [],
|
||||
is_active: true,
|
||||
is_public: true
|
||||
};
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
openEditModal(tier) {
|
||||
this.editingTier = tier;
|
||||
this.formData = {
|
||||
code: tier.code,
|
||||
name: tier.name,
|
||||
description: tier.description || '',
|
||||
price_monthly_cents: tier.price_monthly_cents,
|
||||
price_annual_cents: tier.price_annual_cents,
|
||||
orders_per_month: tier.orders_per_month,
|
||||
products_limit: tier.products_limit,
|
||||
team_members: tier.team_members,
|
||||
display_order: tier.display_order,
|
||||
stripe_product_id: tier.stripe_product_id || '',
|
||||
stripe_price_monthly_id: tier.stripe_price_monthly_id || '',
|
||||
features: tier.features || [],
|
||||
is_active: tier.is_active,
|
||||
is_public: tier.is_public
|
||||
};
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.showModal = false;
|
||||
this.editingTier = null;
|
||||
},
|
||||
|
||||
async saveTier() {
|
||||
this.saving = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
// Clean up null values for empty strings
|
||||
const payload = { ...this.formData };
|
||||
if (payload.price_annual_cents === '') payload.price_annual_cents = null;
|
||||
if (payload.orders_per_month === '') payload.orders_per_month = null;
|
||||
if (payload.products_limit === '') payload.products_limit = null;
|
||||
if (payload.team_members === '') payload.team_members = null;
|
||||
|
||||
if (this.editingTier) {
|
||||
// Update existing tier
|
||||
await apiClient.patch(`/admin/subscriptions/tiers/${this.editingTier.code}`, payload);
|
||||
this.successMessage = `Tier "${payload.name}" updated successfully`;
|
||||
} else {
|
||||
// Create new tier
|
||||
await apiClient.post('/admin/subscriptions/tiers', payload);
|
||||
this.successMessage = `Tier "${payload.name}" created successfully`;
|
||||
}
|
||||
|
||||
this.closeModal();
|
||||
await this.loadTiers();
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to save tier:', error);
|
||||
this.error = error.message || 'Failed to save tier';
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
async toggleTierStatus(tier, activate) {
|
||||
try {
|
||||
await apiClient.patch(`/admin/subscriptions/tiers/${tier.code}`, {
|
||||
is_active: activate
|
||||
});
|
||||
this.successMessage = `Tier "${tier.name}" ${activate ? 'activated' : 'deactivated'}`;
|
||||
await this.loadTiers();
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to toggle tier status:', error);
|
||||
this.error = error.message || 'Failed to update tier';
|
||||
}
|
||||
},
|
||||
|
||||
formatCurrency(cents) {
|
||||
if (cents === null || cents === undefined) return '-';
|
||||
return new Intl.NumberFormat('de-LU', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(cents / 100);
|
||||
},
|
||||
|
||||
// ==================== FEATURE MANAGEMENT ====================
|
||||
|
||||
async loadFeatures() {
|
||||
try {
|
||||
const data = await apiClient.get('/admin/features');
|
||||
this.features = data.features || [];
|
||||
tiersLog.info(`Loaded ${this.features.length} features`);
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to load features:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadCategories() {
|
||||
try {
|
||||
const data = await apiClient.get('/admin/features/categories');
|
||||
this.categories = data.categories || [];
|
||||
tiersLog.info(`Loaded ${this.categories.length} categories`);
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to load categories:', error);
|
||||
}
|
||||
},
|
||||
|
||||
groupFeaturesByCategory() {
|
||||
this.featuresGrouped = {};
|
||||
for (const category of this.categories) {
|
||||
this.featuresGrouped[category] = this.features.filter(f => f.category === category);
|
||||
}
|
||||
},
|
||||
|
||||
async openFeaturePanel(tier) {
|
||||
tiersLog.info('Opening feature panel for tier:', tier.code);
|
||||
this.selectedTierForFeatures = tier;
|
||||
this.loadingFeatures = true;
|
||||
this.showFeaturePanel = true;
|
||||
|
||||
try {
|
||||
// Load tier's current features
|
||||
const data = await apiClient.get(`/admin/features/tiers/${tier.code}/features`);
|
||||
if (data.features) {
|
||||
this.selectedFeatures = data.features.map(f => f.code);
|
||||
} else {
|
||||
this.selectedFeatures = tier.features || [];
|
||||
}
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to load tier features:', error);
|
||||
this.selectedFeatures = tier.features || [];
|
||||
} finally {
|
||||
this.groupFeaturesByCategory();
|
||||
this.loadingFeatures = false;
|
||||
}
|
||||
},
|
||||
|
||||
closeFeaturePanel() {
|
||||
this.showFeaturePanel = false;
|
||||
this.selectedTierForFeatures = null;
|
||||
this.selectedFeatures = [];
|
||||
this.featuresGrouped = {};
|
||||
},
|
||||
|
||||
toggleFeature(featureCode) {
|
||||
const index = this.selectedFeatures.indexOf(featureCode);
|
||||
if (index === -1) {
|
||||
this.selectedFeatures.push(featureCode);
|
||||
} else {
|
||||
this.selectedFeatures.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
isFeatureSelected(featureCode) {
|
||||
return this.selectedFeatures.includes(featureCode);
|
||||
},
|
||||
|
||||
async saveFeatures() {
|
||||
if (!this.selectedTierForFeatures) return;
|
||||
|
||||
tiersLog.info('Saving features for tier:', this.selectedTierForFeatures.code);
|
||||
this.savingFeatures = true;
|
||||
|
||||
try {
|
||||
await apiClient.put(
|
||||
`/admin/features/tiers/${this.selectedTierForFeatures.code}/features`,
|
||||
{ feature_codes: this.selectedFeatures }
|
||||
);
|
||||
|
||||
this.successMessage = `Features updated for ${this.selectedTierForFeatures.name}`;
|
||||
this.closeFeaturePanel();
|
||||
await this.loadTiers();
|
||||
} catch (error) {
|
||||
tiersLog.error('Failed to save features:', error);
|
||||
this.error = error.message || 'Failed to save features';
|
||||
} finally {
|
||||
this.savingFeatures = false;
|
||||
}
|
||||
},
|
||||
|
||||
selectAllInCategory(category) {
|
||||
const categoryFeatures = this.featuresGrouped[category] || [];
|
||||
for (const feature of categoryFeatures) {
|
||||
if (!this.selectedFeatures.includes(feature.code)) {
|
||||
this.selectedFeatures.push(feature.code);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
deselectAllInCategory(category) {
|
||||
const categoryFeatures = this.featuresGrouped[category] || [];
|
||||
const codes = categoryFeatures.map(f => f.code);
|
||||
this.selectedFeatures = this.selectedFeatures.filter(c => !codes.includes(c));
|
||||
},
|
||||
|
||||
allSelectedInCategory(category) {
|
||||
const categoryFeatures = this.featuresGrouped[category] || [];
|
||||
if (categoryFeatures.length === 0) return false;
|
||||
return categoryFeatures.every(f => this.selectedFeatures.includes(f.code));
|
||||
},
|
||||
|
||||
formatCategoryName(category) {
|
||||
return category
|
||||
.split('_')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
tiersLog.info('Subscription tiers module loaded');
|
||||
Reference in New Issue
Block a user