sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comprehensive tier-based feature management system

Browse Source 
Implement database-driven feature gating with contextual upgrade prompts:

- Add Feature model with 30 features across 8 categories
- Create FeatureService with caching for tier-based feature checking
- Add @require_feature decorator and RequireFeature dependency for backend enforcement
- Create vendor features API (6 endpoints) and admin features API
- Add Alpine.js feature store and upgrade prompts store for frontend
- Create Jinja macros: feature_gate, feature_locked, limit_warning, usage_bar
- Add usage API for tracking orders/products/team limits with upgrade info
- Fix Stripe webhook to create VendorAddOn records on addon purchase
- Integrate upgrade prompts into vendor dashboard with tier badge and usage bars

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-31 18:28:40 +01:00
parent b61255f0c3
commit 7d1a421826
20 changed files with 3786 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
app/templates/admin/features.html Normal file
View File

@@ -0,0 +1,370 @@
{% extends "admin/base.html" %}
{% block title %}Feature Management{% endblock %}
{% block alpine_data %}featuresPage(){% endblock %}
{% block content %}
<div class="py-6">
<!-- Header -->
<div class="mb-8">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Feature Management
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
Configure which features are available to each subscription tier.
</p>
</div>
<!-- Loading State -->
<div x-show="loading" class="flex justify-center py-12">
<svg class="animate-spin h-8 w-8 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<!-- Tier Tabs -->
<div x-show="!loading" x-cloak>
<!-- Tab Navigation -->
<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
<nav class="-mb-px flex space-x-8">
<template x-for="tier in tiers" :key="tier.code">
<button
@click="selectedTier = tier.code"
:class="{
'border-purple-500 text-purple-600 dark:text-purple-400': selectedTier === tier.code,
'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300': selectedTier !== tier.code
}"
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
<span x-text="tier.name"></span>
<span class="ml-2 px-2 py-0.5 text-xs rounded-full"
:class="selectedTier === tier.code ? 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'"
x-text="tier.feature_count"></span>
</button>
</template>
</nav>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Available Features (for selected tier) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
Included Features
</h3>
<span class="text-sm text-gray-500 dark:text-gray-400"
x-text="`${getSelectedTierFeatures().length} features`"></span>
</div>
<div class="space-y-2 max-h-96 overflow-y-auto">
<template x-for="featureCode in getSelectedTierFeatures()" :key="featureCode">
<div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
<div class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white"
x-text="getFeatureName(featureCode)"></p>
<p class="text-xs text-gray-500 dark:text-gray-400"
x-text="getFeatureCategory(featureCode)"></p>
</div>
</div>
<button
@click="removeFeatureFromTier(featureCode)"
class="text-red-500 hover:text-red-700 p-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</template>
<div x-show="getSelectedTierFeatures().length === 0"
class="text-center py-8 text-gray-500 dark:text-gray-400">
No features assigned to this tier
</div>
</div>
</div>
<!-- All Features (to add) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
Available to Add
</h3>
<select
x-model="categoryFilter"
class="text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md">
<option value="">All Categories</option>
<template x-for="cat in categories" :key="cat">
<option :value="cat" x-text="cat.charAt(0).toUpperCase() + cat.slice(1)"></option>
</template>
</select>
</div>
<div class="space-y-2 max-h-96 overflow-y-auto">
<template x-for="feature in getAvailableFeatures()" :key="feature.code">
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white"
x-text="feature.name"></p>
<p class="text-xs text-gray-500 dark:text-gray-400"
x-text="feature.category"></p>
</div>
</div>
<button
@click="addFeatureToTier(feature.code)"
class="text-green-500 hover:text-green-700 p-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</button>
</div>
</template>
<div x-show="getAvailableFeatures().length === 0"
class="text-center py-8 text-gray-500 dark:text-gray-400">
All features are assigned to this tier
</div>
</div>
</div>
</div>
<!-- Save Button -->
<div class="mt-6 flex justify-end">
<button
@click="saveTierFeatures"
:disabled="saving || !hasChanges"
:class="{
'opacity-50 cursor-not-allowed': saving || !hasChanges,
'hover:bg-purple-700': !saving && hasChanges
}"
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
<svg x-show="saving" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
</button>
</div>
<!-- All Features Table -->
<div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
All Features
</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
Complete list of all platform features with their minimum tier requirement.
</p>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Feature
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Category
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Minimum Tier
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<template x-for="feature in allFeatures" :key="feature.code">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-white" x-text="feature.name"></div>
<div class="text-xs text-gray-500 dark:text-gray-400" x-text="feature.code"></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
x-text="feature.category"></span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full"
:class="{
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': feature.minimum_tier_code === 'essential',
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': feature.minimum_tier_code === 'professional',
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': feature.minimum_tier_code === 'business',
'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300': feature.minimum_tier_code === 'enterprise',
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': !feature.minimum_tier_code
}"
x-text="feature.minimum_tier_name || 'N/A'"></span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span x-show="feature.is_active"
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
Active
</span>
<span x-show="!feature.is_active"
class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">
Inactive
</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
function featuresPage() {
return {
...data(),
// State
loading: true,
saving: false,
tiers: [],
allFeatures: [],
categories: [],
selectedTier: 'essential',
categoryFilter: '',
originalTierFeatures: {}, // To track changes
currentTierFeatures: {}, // Current state
// Computed
get hasChanges() {
const original = this.originalTierFeatures[this.selectedTier] || [];
const current = this.currentTierFeatures[this.selectedTier] || [];
return JSON.stringify(original.sort()) !== JSON.stringify(current.sort());
},
// Lifecycle
async init() {
// Call parent init
const path = window.location.pathname;
const segments = path.split('/').filter(Boolean);
this.currentPage = segments[segments.length - 1] || 'features';
await this.loadData();
},
// Methods
async loadData() {
try {
this.loading = true;
// Load tiers and features in parallel
const [tiersResponse, featuresResponse, categoriesResponse] = await Promise.all([
apiClient.get('/admin/features/tiers'),
apiClient.get('/admin/features'),
apiClient.get('/admin/features/categories'),
]);
this.tiers = tiersResponse.tiers;
this.allFeatures = featuresResponse.features;
this.categories = categoriesResponse.categories;
// Initialize tier features tracking
for (const tier of this.tiers) {
this.originalTierFeatures[tier.code] = [...tier.features];
this.currentTierFeatures[tier.code] = [...tier.features];
}
} catch (error) {
console.error('Failed to load features:', error);
this.showNotification('Failed to load features', 'error');
} finally {
this.loading = false;
}
},
getSelectedTierFeatures() {
return this.currentTierFeatures[this.selectedTier] || [];
},
getAvailableFeatures() {
const tierFeatures = this.getSelectedTierFeatures();
return this.allFeatures.filter(f => {
const notIncluded = !tierFeatures.includes(f.code);
const matchesCategory = !this.categoryFilter || f.category === this.categoryFilter;
return notIncluded && matchesCategory && f.is_active;
});
},
getFeatureName(code) {
const feature = this.allFeatures.find(f => f.code === code);
return feature?.name || code;
},
getFeatureCategory(code) {
const feature = this.allFeatures.find(f => f.code === code);
return feature?.category || 'unknown';
},
addFeatureToTier(featureCode) {
if (!this.currentTierFeatures[this.selectedTier].includes(featureCode)) {
this.currentTierFeatures[this.selectedTier].push(featureCode);
}
},
removeFeatureFromTier(featureCode) {
const index = this.currentTierFeatures[this.selectedTier].indexOf(featureCode);
if (index > -1) {
this.currentTierFeatures[this.selectedTier].splice(index, 1);
}
},
async saveTierFeatures() {
if (!this.hasChanges) return;
try {
this.saving = true;
await apiClient.put(`/admin/features/tiers/${this.selectedTier}/features`, {
feature_codes: this.currentTierFeatures[this.selectedTier]
});
// Update original to match current
this.originalTierFeatures[this.selectedTier] = [...this.currentTierFeatures[this.selectedTier]];
// Update tier in tiers array
const tier = this.tiers.find(t => t.code === this.selectedTier);
if (tier) {
tier.features = [...this.currentTierFeatures[this.selectedTier]];
tier.feature_count = tier.features.length;
}
this.showNotification('Features saved successfully', 'success');
} catch (error) {
console.error('Failed to save features:', error);
this.showNotification('Failed to save features', 'error');
} finally {
this.saving = false;
}
},
showNotification(message, type = 'info') {
// Simple alert for now - could be improved with toast notifications
if (type === 'error') {
alert('Error: ' + message);
} else {
console.log(message);
}
}
};
}
</script>
{% endblock %}