feat(billing): migrate frontend templates to feature provider system

Replace hardcoded subscription fields (orders_limit, products_limit,
team_members_limit) across 5 frontend pages with dynamic feature
provider APIs. Add admin convenience endpoint for store subscription
lookup. Remove legacy stubs (StoreSubscription, FeatureCode, Feature,
TIER_LIMITS, FeatureInfo, FeatureUpgradeInfo) and schema aliases.

Pages updated:
- Admin subscriptions: dynamic feature overrides editor
- Admin tiers: correct feature catalog/limits API URLs
- Store billing: usage metrics from /store/billing/usage
- Merchant subscription detail: tier.feature_limits rendering
- Admin store detail: new GET /admin/subscriptions/store/{id} endpoint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 15:18:16 +01:00
parent 922616c9e3
commit 1db7e8a087
19 changed files with 2508 additions and 1205 deletions

View File

@@ -28,6 +28,7 @@ function adminSubscriptionTiers() {
categories: [],
featuresGrouped: {},
selectedFeatures: [],
featureLimits: {}, // { feature_code: limit_value }
selectedTierForFeatures: null,
showFeaturePanel: false,
loadingFeatures: false,
@@ -46,13 +47,9 @@ function adminSubscriptionTiers() {
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
},
@@ -70,8 +67,7 @@ function adminSubscriptionTiers() {
await Promise.all([
this.loadTiers(),
this.loadStats(),
this.loadFeatures(),
this.loadCategories()
this.loadFeatures()
]);
tiersLog.info('=== SUBSCRIPTION TIERS PAGE INITIALIZED ===');
} catch (error) {
@@ -137,13 +133,9 @@ function adminSubscriptionTiers() {
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
};
@@ -158,13 +150,9 @@ function adminSubscriptionTiers() {
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
};
@@ -184,9 +172,6 @@ function adminSubscriptionTiers() {
// 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
@@ -233,24 +218,22 @@ function adminSubscriptionTiers() {
async loadFeatures() {
try {
const data = await apiClient.get('/admin/features');
this.features = data.features || [];
tiersLog.info(`Loaded ${this.features.length} features`);
const data = await apiClient.get('/admin/subscriptions/features/catalog');
// Parse grouped response: { features: { category: [FeatureDeclaration, ...] } }
this.features = [];
this.categories = [];
for (const [category, featureList] of Object.entries(data.features || {})) {
this.categories.push(category);
for (const f of featureList) {
this.features.push({ ...f, category });
}
}
tiersLog.info(`Loaded ${this.features.length} features in ${this.categories.length} categories`);
} 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) {
@@ -263,18 +246,22 @@ function adminSubscriptionTiers() {
this.selectedTierForFeatures = tier;
this.loadingFeatures = true;
this.showFeaturePanel = true;
this.featureLimits = {};
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 || [];
// Load tier's current feature limits
const data = await apiClient.get(`/admin/subscriptions/features/tiers/${tier.code}/limits`);
// data is TierFeatureLimitEntry[]: [{feature_code, limit_value, enabled}]
this.selectedFeatures = [];
for (const entry of (data || [])) {
this.selectedFeatures.push(entry.feature_code);
if (entry.limit_value !== null && entry.limit_value !== undefined) {
this.featureLimits[entry.feature_code] = entry.limit_value;
}
}
} catch (error) {
tiersLog.error('Failed to load tier features:', error);
this.selectedFeatures = tier.features || [];
this.selectedFeatures = tier.feature_codes || tier.features || [];
} finally {
this.groupFeaturesByCategory();
this.loadingFeatures = false;
@@ -285,6 +272,7 @@ function adminSubscriptionTiers() {
this.showFeaturePanel = false;
this.selectedTierForFeatures = null;
this.selectedFeatures = [];
this.featureLimits = {};
this.featuresGrouped = {};
},
@@ -308,9 +296,16 @@ function adminSubscriptionTiers() {
this.savingFeatures = true;
try {
// Build TierFeatureLimitEntry[] payload
const entries = this.selectedFeatures.map(code => ({
feature_code: code,
limit_value: this.featureLimits[code] ?? null,
enabled: true
}));
await apiClient.put(
`/admin/features/tiers/${this.selectedTierForFeatures.code}/features`,
{ feature_codes: this.selectedFeatures }
`/admin/subscriptions/features/tiers/${this.selectedTierForFeatures.code}/limits`,
entries
);
this.successMessage = `Features updated for ${this.selectedTierForFeatures.name}`;
@@ -345,6 +340,18 @@ function adminSubscriptionTiers() {
return categoryFeatures.every(f => this.selectedFeatures.includes(f.code));
},
getFeatureLimitValue(featureCode) {
return this.featureLimits[featureCode] ?? '';
},
setFeatureLimitValue(featureCode, value) {
if (value === '' || value === null || value === undefined) {
delete this.featureLimits[featureCode];
} else {
this.featureLimits[featureCode] = parseInt(value, 10);
}
},
formatCategoryName(category) {
return category
.split('_')

View File

@@ -39,7 +39,7 @@ function adminSubscriptions() {
},
// Sorting
sortBy: 'vendor_name',
sortBy: 'store_name',
sortOrder: 'asc',
// Modal state
@@ -47,12 +47,14 @@ function adminSubscriptions() {
editingSub: null,
formData: {
tier: '',
status: '',
custom_orders_limit: null,
custom_products_limit: null,
custom_team_limit: null
status: ''
},
// Feature overrides
featureOverrides: [],
quantitativeFeatures: [],
loadingOverrides: false,
// Computed: Total pages
get totalPages() {
return this.pagination.pages;
@@ -203,16 +205,18 @@ function adminSubscriptions() {
}
},
openEditModal(sub) {
async openEditModal(sub) {
this.editingSub = sub;
this.formData = {
tier: sub.tier,
status: sub.status,
custom_orders_limit: sub.custom_orders_limit,
custom_products_limit: sub.custom_products_limit,
custom_team_limit: sub.custom_team_limit
status: sub.status
};
this.featureOverrides = [];
this.quantitativeFeatures = [];
this.showModal = true;
// Load feature catalog and merchant overrides
await this.loadFeatureOverrides(sub.merchant_id);
},
closeModal() {
@@ -220,6 +224,77 @@ function adminSubscriptions() {
this.editingSub = null;
},
async loadFeatureOverrides(merchantId) {
this.loadingOverrides = true;
try {
const [catalogData, overridesData] = await Promise.all([
apiClient.get('/admin/subscriptions/features/catalog'),
apiClient.get(`/admin/subscriptions/features/merchants/${merchantId}/overrides`),
]);
// Extract quantitative features from catalog
const allFeatures = [];
for (const [, features] of Object.entries(catalogData.features || {})) {
for (const f of features) {
if (f.feature_type === 'quantitative') {
allFeatures.push(f);
}
}
}
this.quantitativeFeatures = allFeatures;
// Map overrides by feature_code
this.featureOverrides = (overridesData || []).map(o => ({
feature_code: o.feature_code,
limit_value: o.limit_value,
is_enabled: o.is_enabled
}));
subsLog.info(`Loaded ${allFeatures.length} quantitative features and ${this.featureOverrides.length} overrides`);
} catch (error) {
subsLog.error('Failed to load feature overrides:', error);
} finally {
this.loadingOverrides = false;
}
},
getOverrideValue(featureCode) {
const override = this.featureOverrides.find(o => o.feature_code === featureCode);
return override?.limit_value ?? '';
},
setOverrideValue(featureCode, value) {
const numValue = value === '' ? null : parseInt(value, 10);
const existing = this.featureOverrides.find(o => o.feature_code === featureCode);
if (existing) {
existing.limit_value = numValue;
} else if (numValue !== null) {
this.featureOverrides.push({
feature_code: featureCode,
limit_value: numValue,
is_enabled: true
});
}
},
async saveFeatureOverrides(merchantId) {
// Only send overrides that have a limit_value set
const entries = this.featureOverrides
.filter(o => o.limit_value !== null && o.limit_value !== undefined)
.map(o => ({
feature_code: o.feature_code,
limit_value: o.limit_value,
is_enabled: true
}));
if (entries.length > 0) {
await apiClient.put(
`/admin/subscriptions/features/merchants/${merchantId}/overrides`,
entries
);
}
},
async saveSubscription() {
if (!this.editingSub) return;
@@ -227,14 +302,17 @@ function adminSubscriptions() {
this.error = null;
try {
// Clean up null values for empty strings
const payload = { ...this.formData };
if (payload.custom_orders_limit === '') payload.custom_orders_limit = null;
if (payload.custom_products_limit === '') payload.custom_products_limit = null;
if (payload.custom_team_limit === '') payload.custom_team_limit = null;
await apiClient.patch(`/admin/subscriptions/${this.editingSub.vendor_id}`, payload);
this.successMessage = `Subscription for "${this.editingSub.vendor_name}" updated`;
await apiClient.patch(
`/admin/subscriptions/merchants/${this.editingSub.merchant_id}/platforms/${this.editingSub.platform_id}`,
payload
);
// Save feature overrides
await this.saveFeatureOverrides(this.editingSub.merchant_id);
this.successMessage = `Subscription for "${this.editingSub.store_name || this.editingSub.merchant_name}" updated`;
this.closeModal();
await this.loadSubscriptions();