Samir Boulahtit
7d1a421826
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>
336 lines
14 KiB
HTML
336 lines
14 KiB
HTML
{# =============================================================================
|
|
Feature Gate Macros
|
|
|
|
Provides macros for tier-based feature gating in templates.
|
|
Uses Alpine.js $store.features for dynamic checking.
|
|
|
|
Usage:
|
|
{% from "shared/macros/feature_gate.html" import feature_gate, feature_locked, upgrade_banner %}
|
|
|
|
{# Show content only if feature is available #}
|
|
{% call feature_gate("analytics_dashboard") %}
|
|
<div>Analytics content here</div>
|
|
{% endcall %}
|
|
|
|
{# Show locked state with upgrade prompt #}
|
|
{{ feature_locked("analytics_dashboard", "Analytics Dashboard", "View advanced analytics") }}
|
|
|
|
{# Show upgrade banner #}
|
|
{{ upgrade_banner("analytics_dashboard") }}
|
|
============================================================================= #}
|
|
|
|
|
|
{# =============================================================================
|
|
Feature Gate Container
|
|
Shows content only if feature is available
|
|
|
|
Parameters:
|
|
- feature_code: The feature code to check
|
|
- fallback: Optional fallback content when feature is not available
|
|
============================================================================= #}
|
|
{% macro feature_gate(feature_code, show_fallback=true) %}
|
|
<div x-data x-show="$store.features.has('{{ feature_code }}')" x-cloak>
|
|
{{ caller() }}
|
|
</div>
|
|
{% if show_fallback %}
|
|
<div x-data x-show="$store.features.loaded && !$store.features.has('{{ feature_code }}')" x-cloak>
|
|
{{ feature_locked(feature_code) }}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Feature Locked Card
|
|
Shows a card explaining the feature is locked with upgrade prompt
|
|
|
|
Parameters:
|
|
- feature_code: The feature code
|
|
- title: Optional title override
|
|
- description: Optional description override
|
|
- show_upgrade_button: Whether to show upgrade button (default true)
|
|
============================================================================= #}
|
|
{% macro feature_locked(feature_code, title=none, description=none, show_upgrade_button=true) %}
|
|
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-6 text-center"
|
|
x-data="{ feature: null }"
|
|
x-init="
|
|
await $store.features.loadFullFeatures();
|
|
feature = $store.features.getFeature('{{ feature_code }}');
|
|
">
|
|
{# Lock icon #}
|
|
<div class="mx-auto w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{# Title #}
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
|
{% if title %}
|
|
{{ title }}
|
|
{% else %}
|
|
<span x-text="feature?.name || 'Premium Feature'">Premium Feature</span>
|
|
{% endif %}
|
|
</h3>
|
|
|
|
{# Description #}
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
|
{% if description %}
|
|
{{ description }}
|
|
{% else %}
|
|
<span x-text="feature?.description || 'This feature requires a plan upgrade.'">
|
|
This feature requires a plan upgrade.
|
|
</span>
|
|
{% endif %}
|
|
</p>
|
|
|
|
{# Tier badge #}
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
|
Available on
|
|
<span class="font-semibold text-purple-600 dark:text-purple-400"
|
|
x-text="feature?.minimum_tier_name || 'higher tier'">higher tier</span>
|
|
plan
|
|
</p>
|
|
|
|
{% if show_upgrade_button %}
|
|
{# Upgrade button #}
|
|
<a :href="`/vendor/${$store.features.getVendorCode()}/billing`"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md
|
|
text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2
|
|
focus:ring-offset-2 focus:ring-purple-500 transition-colors">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
|
</svg>
|
|
Upgrade Plan
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Upgrade Banner
|
|
Inline banner for upgrade prompts
|
|
|
|
Parameters:
|
|
- feature_code: The feature code
|
|
- message: Optional custom message
|
|
============================================================================= #}
|
|
{% macro upgrade_banner(feature_code, message=none) %}
|
|
<div x-data="{ feature: null }"
|
|
x-init="
|
|
await $store.features.loadFullFeatures();
|
|
feature = $store.features.getFeature('{{ feature_code }}');
|
|
"
|
|
x-show="$store.features.loaded && !$store.features.has('{{ feature_code }}')"
|
|
x-cloak
|
|
class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg p-4 mb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
<p class="text-white text-sm">
|
|
{% if message %}
|
|
{{ message }}
|
|
{% else %}
|
|
<span x-text="'Upgrade to ' + (feature?.minimum_tier_name || 'a higher plan') + ' to unlock ' + (feature?.name || 'this feature')">
|
|
Upgrade to unlock this feature
|
|
</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<a :href="`/vendor/${$store.features.getVendorCode()}/billing`"
|
|
class="inline-flex items-center px-3 py-1.5 border border-white text-xs font-medium rounded
|
|
text-white hover:bg-white hover:text-purple-600 transition-colors">
|
|
Upgrade
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Feature Badge
|
|
Small badge to show feature tier requirement
|
|
|
|
Parameters:
|
|
- feature_code: The feature code
|
|
============================================================================= #}
|
|
{% macro feature_badge(feature_code) %}
|
|
<span x-data="{ feature: null }"
|
|
x-init="
|
|
await $store.features.loadFullFeatures();
|
|
feature = $store.features.getFeature('{{ feature_code }}');
|
|
"
|
|
x-show="!$store.features.has('{{ feature_code }}')"
|
|
x-cloak
|
|
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
<span x-text="feature?.minimum_tier_name || 'Pro'">Pro</span>
|
|
</span>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Sidebar Item with Feature Gate
|
|
Sidebar navigation item that shows lock if feature not available
|
|
|
|
Parameters:
|
|
- feature_code: The feature code
|
|
- href: Link URL
|
|
- icon: Icon name
|
|
- label: Display label
|
|
- current_page: Current page for active state
|
|
============================================================================= #}
|
|
{% macro sidebar_item_gated(feature_code, href, icon, label, current_page='') %}
|
|
<template x-if="$store.features.has('{{ feature_code }}')">
|
|
<a href="{{ href }}"
|
|
class="flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-colors
|
|
{{ 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' if current_page == label|lower else 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white' }}">
|
|
<span class="w-5 h-5 mr-3" x-html="window.icons?.['{{ icon }}'] || ''"></span>
|
|
{{ label }}
|
|
</a>
|
|
</template>
|
|
<template x-if="!$store.features.has('{{ feature_code }}')">
|
|
<div class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-400 dark:text-gray-500 cursor-not-allowed"
|
|
title="Requires plan upgrade">
|
|
<span class="w-5 h-5 mr-3" x-html="window.icons?.['{{ icon }}'] || ''"></span>
|
|
{{ label }}
|
|
<svg class="w-4 h-4 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
UPGRADE PROMPT MACROS
|
|
============================================================================= #}
|
|
|
|
|
|
{# =============================================================================
|
|
Usage Limit Warning
|
|
Shows warning banner when approaching or at a limit
|
|
|
|
Parameters:
|
|
- metric_name: One of "orders", "products", "team_members"
|
|
============================================================================= #}
|
|
{% macro limit_warning(metric_name) %}
|
|
<div x-data
|
|
x-init="$store.upgrade.loadUsage()"
|
|
x-show="$store.upgrade.shouldShowLimitWarning('{{ metric_name }}')"
|
|
x-cloak
|
|
x-html="$store.upgrade.getLimitWarningHTML('{{ metric_name }}')">
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Usage Progress Bar
|
|
Shows compact progress bar for a limit
|
|
|
|
Parameters:
|
|
- metric_name: One of "orders", "products", "team_members"
|
|
- label: Display label
|
|
============================================================================= #}
|
|
{% macro usage_bar(metric_name, label) %}
|
|
<div x-data x-init="$store.upgrade.loadUsage()">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ label }}</span>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400"
|
|
x-text="$store.upgrade.getUsageString('{{ metric_name }}')"></span>
|
|
</div>
|
|
<div x-html="$store.upgrade.getUsageBarHTML('{{ metric_name }}')"></div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Upgrade Card
|
|
Shows upgrade recommendation card (for dashboard)
|
|
Only shows if there are upgrade recommendations
|
|
|
|
Parameters:
|
|
- class: Additional CSS classes
|
|
============================================================================= #}
|
|
{% macro upgrade_card(class='') %}
|
|
<div x-data
|
|
x-init="$store.upgrade.loadUsage()"
|
|
x-show="$store.upgrade.hasUpgradeRecommendation"
|
|
x-cloak
|
|
class="{{ class }}"
|
|
x-html="$store.upgrade.getUpgradeCardHTML()">
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Limit Check Button
|
|
Button that checks limit before action
|
|
|
|
Parameters:
|
|
- limit_type: One of "orders", "products", "team_members"
|
|
- action: JavaScript to execute if limit allows
|
|
- label: Button label
|
|
- class: Additional CSS classes
|
|
============================================================================= #}
|
|
{% macro limit_check_button(limit_type, action, label, class='') %}
|
|
<button
|
|
@click="$store.upgrade.checkLimitAndProceed('{{ limit_type }}', () => { {{ action }} })"
|
|
class="{{ class }}">
|
|
{{ label }}
|
|
</button>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Tier Badge
|
|
Shows current tier as a badge
|
|
|
|
Parameters:
|
|
- class: Additional CSS classes
|
|
============================================================================= #}
|
|
{% macro tier_badge(class='') %}
|
|
<span x-data
|
|
x-init="$store.upgrade.loadUsage()"
|
|
x-show="$store.upgrade.currentTier"
|
|
x-cloak
|
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ class }}"
|
|
:class="{
|
|
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': $store.upgrade.currentTier?.code === 'essential',
|
|
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': $store.upgrade.currentTier?.code === 'professional',
|
|
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': $store.upgrade.currentTier?.code === 'business',
|
|
'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300': $store.upgrade.currentTier?.code === 'enterprise'
|
|
}"
|
|
x-text="$store.upgrade.currentTier?.name">
|
|
</span>
|
|
{% endmacro %}
|
|
|
|
|
|
{# =============================================================================
|
|
Quick Upgrade Link
|
|
Simple upgrade link that appears when limits are reached
|
|
============================================================================= #}
|
|
{% macro quick_upgrade_link() %}
|
|
<a x-data
|
|
x-init="$store.upgrade.loadUsage()"
|
|
x-show="$store.upgrade.hasLimitsReached && $store.upgrade.nextTier"
|
|
x-cloak
|
|
:href="$store.upgrade.getBillingUrl()"
|
|
class="inline-flex items-center text-sm text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
|
</svg>
|
|
<span>Upgrade to <span x-text="$store.upgrade.nextTier?.name"></span></span>
|
|
</a>
|
|
{% endmacro %}
|