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:
@@ -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('_')
|
||||
|
||||
Reference in New Issue
Block a user