feat: Plan-based feature permissions and quota enforcement
Backend: - Add HasQuota() permission factory for quota limits (resources, users, services, appointments, email templates, automated tasks) - Add HasFeaturePermission() factory for feature-based permissions (SMS, masked calling, custom domains, white label, plugins, webhooks, calendar sync, analytics) - Add has_feature() method to Tenant model for flexible permission checking - Add new tenant permission fields: can_create_plugins, can_use_webhooks, can_use_calendar_sync, can_export_data - Create Data Export API with CSV/JSON support for appointments, customers, resources, services - Create Analytics API with dashboard, appointments, revenue endpoints - Add calendar sync views and URL configuration Frontend: - Add usePlanFeatures hook for checking feature availability - Add UpgradePrompt components (inline, banner, overlay variants) - Add LockedSection wrapper and LockedButton for feature gating - Update settings pages with permission checks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
217
frontend/src/components/UpgradePrompt.tsx
Normal file
217
frontend/src/components/UpgradePrompt.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* UpgradePrompt Component
|
||||
*
|
||||
* Shows a locked state with upgrade prompt for features not available in current plan
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Lock, Crown, ArrowUpRight } from 'lucide-react';
|
||||
import { FeatureKey, FEATURE_NAMES, FEATURE_DESCRIPTIONS } from '../hooks/usePlanFeatures';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface UpgradePromptProps {
|
||||
feature: FeatureKey;
|
||||
children?: React.ReactNode;
|
||||
variant?: 'inline' | 'overlay' | 'banner';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
showDescription?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline variant - Small badge for locked features
|
||||
*/
|
||||
const InlinePrompt: React.FC<{ feature: FeatureKey }> = ({ feature }) => (
|
||||
<div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-amber-50 text-amber-700 text-xs font-medium border border-amber-200">
|
||||
<Lock className="w-3 h-3" />
|
||||
<span>Upgrade Required</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
/**
|
||||
* Banner variant - Full-width banner for locked sections
|
||||
*/
|
||||
const BannerPrompt: React.FC<{ feature: FeatureKey; showDescription: boolean }> = ({
|
||||
feature,
|
||||
showDescription
|
||||
}) => (
|
||||
<div className="rounded-lg border-2 border-amber-300 bg-gradient-to-br from-amber-50 to-orange-50 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
|
||||
<Crown className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">
|
||||
{FEATURE_NAMES[feature]} - Upgrade Required
|
||||
</h3>
|
||||
{showDescription && (
|
||||
<p className="text-gray-600 mb-4">
|
||||
{FEATURE_DESCRIPTIONS[feature]}
|
||||
</p>
|
||||
)}
|
||||
<Link
|
||||
to="/settings/billing"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium hover:from-amber-600 hover:to-orange-600 transition-all shadow-md hover:shadow-lg"
|
||||
>
|
||||
<Crown className="w-4 h-4" />
|
||||
Upgrade Your Plan
|
||||
<ArrowUpRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
/**
|
||||
* Overlay variant - Overlay on top of disabled content
|
||||
*/
|
||||
const OverlayPrompt: React.FC<{
|
||||
feature: FeatureKey;
|
||||
children?: React.ReactNode;
|
||||
size: 'sm' | 'md' | 'lg';
|
||||
}> = ({ feature, children, size }) => {
|
||||
const sizeClasses = {
|
||||
sm: 'p-4',
|
||||
md: 'p-6',
|
||||
lg: 'p-8',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Disabled content */}
|
||||
<div className="pointer-events-none opacity-50 blur-sm">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-white/90 to-gray-50/90 backdrop-blur-sm">
|
||||
<div className={`text-center ${sizeClasses[size]}`}>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 mb-4 shadow-lg">
|
||||
<Lock className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
||||
{FEATURE_NAMES[feature]}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4 max-w-md">
|
||||
{FEATURE_DESCRIPTIONS[feature]}
|
||||
</p>
|
||||
<Link
|
||||
to="/settings/billing"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium hover:from-amber-600 hover:to-orange-600 transition-all shadow-md hover:shadow-lg"
|
||||
>
|
||||
<Crown className="w-5 h-5" />
|
||||
Upgrade Your Plan
|
||||
<ArrowUpRight className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Main UpgradePrompt Component
|
||||
*/
|
||||
export const UpgradePrompt: React.FC<UpgradePromptProps> = ({
|
||||
feature,
|
||||
children,
|
||||
variant = 'banner',
|
||||
size = 'md',
|
||||
showDescription = true,
|
||||
}) => {
|
||||
if (variant === 'inline') {
|
||||
return <InlinePrompt feature={feature} />;
|
||||
}
|
||||
|
||||
if (variant === 'overlay') {
|
||||
return <OverlayPrompt feature={feature} size={size}>{children}</OverlayPrompt>;
|
||||
}
|
||||
|
||||
// Default to banner
|
||||
return <BannerPrompt feature={feature} showDescription={showDescription} />;
|
||||
};
|
||||
|
||||
/**
|
||||
* Locked Section Wrapper
|
||||
*
|
||||
* Wraps a section and shows upgrade prompt if feature is not available
|
||||
*/
|
||||
interface LockedSectionProps {
|
||||
feature: FeatureKey;
|
||||
isLocked: boolean;
|
||||
children: React.ReactNode;
|
||||
variant?: 'overlay' | 'banner';
|
||||
fallback?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const LockedSection: React.FC<LockedSectionProps> = ({
|
||||
feature,
|
||||
isLocked,
|
||||
children,
|
||||
variant = 'banner',
|
||||
fallback,
|
||||
}) => {
|
||||
if (!isLocked) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
if (fallback) {
|
||||
return <>{fallback}</>;
|
||||
}
|
||||
|
||||
if (variant === 'overlay') {
|
||||
return (
|
||||
<UpgradePrompt feature={feature} variant="overlay">
|
||||
{children}
|
||||
</UpgradePrompt>
|
||||
);
|
||||
}
|
||||
|
||||
return <UpgradePrompt feature={feature} variant="banner" />;
|
||||
};
|
||||
|
||||
/**
|
||||
* Locked Button
|
||||
*
|
||||
* Shows a disabled button with lock icon for locked features
|
||||
*/
|
||||
interface LockedButtonProps {
|
||||
feature: FeatureKey;
|
||||
isLocked: boolean;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const LockedButton: React.FC<LockedButtonProps> = ({
|
||||
feature,
|
||||
isLocked,
|
||||
children,
|
||||
className = '',
|
||||
onClick,
|
||||
}) => {
|
||||
if (isLocked) {
|
||||
return (
|
||||
<div className="relative group inline-block">
|
||||
<button
|
||||
disabled
|
||||
className={`${className} opacity-50 cursor-not-allowed flex items-center gap-2`}
|
||||
>
|
||||
<Lock className="w-4 h-4" />
|
||||
{children}
|
||||
</button>
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
|
||||
{FEATURE_NAMES[feature]} - Upgrade Required
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={onClick} className={className}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user