poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Plan-based feature permissions and quota enforcement

Browse Source 
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
2025-12-02 11:21:11 -05:00
parent 05ebd0f2bb
commit e4ad7fca87
46 changed files with 6582 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
frontend/src/components/UpgradePrompt.tsx Normal file
View 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>
);
};

16
frontend/src/hooks/useBusiness.ts
View File

@@ -49,6 +49,22 @@ export const useCurrentBusiness = () => {
paymentsEnabled: data.payments_enabled ?? false,
// Platform-controlled permissions
canManageOAuthCredentials: data.can_manage_oauth_credentials || false,
// Plan permissions (what features are available based on subscription)
planPermissions: data.plan_permissions || {
sms_reminders: false,
webhooks: false,
api_access: false,
custom_domain: false,
white_label: false,
custom_oauth: false,
plugins: false,
export_data: false,
video_conferencing: false,
two_factor_auth: false,
masked_calling: false,
pos_system: false,
mobile_app: false,
},
};
},
});

112
frontend/src/hooks/usePlanFeatures.ts Normal file
View File

@@ -0,0 +1,112 @@
/**
* Plan Features Hook
*
* Provides utilities for checking feature availability based on subscription plan.
*/
import { useCurrentBusiness } from './useBusiness';
import { PlanPermissions } from '../types';
export type FeatureKey = keyof PlanPermissions;
export interface PlanFeatureCheck {
/**
* Check if a feature is available in the current plan
*/
canUse: (feature: FeatureKey) => boolean;
/**
* Check if any of the features are available
*/
canUseAny: (features: FeatureKey[]) => boolean;
/**
* Check if all of the features are available
*/
canUseAll: (features: FeatureKey[]) => boolean;
/**
* Get the current plan tier
*/
plan: string | undefined;
/**
* All plan permissions
*/
permissions: PlanPermissions | undefined;
/**
* Whether permissions are still loading
*/
isLoading: boolean;
}
/**
* Hook to check plan feature availability
*/
export const usePlanFeatures = (): PlanFeatureCheck => {
const { data: business, isLoading } = useCurrentBusiness();
const canUse = (feature: FeatureKey): boolean => {
if (!business?.planPermissions) {
// Default to false if no permissions loaded yet
return false;
}
return business.planPermissions[feature] ?? false;
};
const canUseAny = (features: FeatureKey[]): boolean => {
return features.some(feature => canUse(feature));
};
const canUseAll = (features: FeatureKey[]): boolean => {
return features.every(feature => canUse(feature));
};
return {
canUse,
canUseAny,
canUseAll,
plan: business?.plan,
permissions: business?.planPermissions,
isLoading,
};
};
/**
* Feature display names for UI
*/
export const FEATURE_NAMES: Record<FeatureKey, string> = {
sms_reminders: 'SMS Reminders',
webhooks: 'Webhooks',
api_access: 'API Access',
custom_domain: 'Custom Domain',
white_label: 'White Label',
custom_oauth: 'Custom OAuth',
plugins: 'Custom Plugins',
export_data: 'Data Export',
video_conferencing: 'Video Conferencing',
two_factor_auth: 'Two-Factor Authentication',
masked_calling: 'Masked Calling',
pos_system: 'POS System',
mobile_app: 'Mobile App',
};
/**
* Feature descriptions for upgrade prompts
*/
export const FEATURE_DESCRIPTIONS: Record<FeatureKey, string> = {
sms_reminders: 'Send automated SMS reminders to customers and staff',
webhooks: 'Integrate with external services using webhooks',
api_access: 'Access the SmoothSchedule API for custom integrations',
custom_domain: 'Use your own custom domain for your booking site',
white_label: 'Remove SmoothSchedule branding and use your own',
custom_oauth: 'Configure your own OAuth credentials for social login',
plugins: 'Create custom plugins to extend functionality',
export_data: 'Export your data to CSV or other formats',
video_conferencing: 'Add video conferencing links to appointments',
two_factor_auth: 'Require two-factor authentication for enhanced security',
masked_calling: 'Use masked phone numbers to protect privacy',
pos_system: 'Process in-person payments with Point of Sale',
mobile_app: 'Access SmoothSchedule on mobile devices',
};

7
frontend/src/pages/settings/ApiSettings.tsx
View File

@@ -10,6 +10,8 @@ import { useOutletContext } from 'react-router-dom';
import { Key } from 'lucide-react';
import { Business, User } from '../../types';
import ApiTokensSection from '../../components/ApiTokensSection';
import { usePlanFeatures } from '../../hooks/usePlanFeatures';
import { LockedSection } from '../../components/UpgradePrompt';
const ApiSettings: React.FC = () => {
const { t } = useTranslation();
@@ -19,6 +21,7 @@ const ApiSettings: React.FC = () => {
}>();
const isOwner = user.role === 'owner';
const { canUse } = usePlanFeatures();
if (!isOwner) {
return (
@@ -44,7 +47,9 @@ const ApiSettings: React.FC = () => {
</div>
{/* API Tokens Section */}
<ApiTokensSection />
<LockedSection feature="api_access" isLocked={!canUse('api_access')}>
<ApiTokensSection />
</LockedSection>
</div>
);
};

13
frontend/src/pages/settings/AuthenticationSettings.tsx
View File

@@ -11,6 +11,8 @@ import { Lock, Users, Key, Save, Check, AlertCircle, Eye, EyeOff } from 'lucide-
import { Business, User } from '../../types';
import { useBusinessOAuthSettings, useUpdateBusinessOAuthSettings } from '../../hooks/useBusinessOAuth';
import { useBusinessOAuthCredentials, useUpdateBusinessOAuthCredentials } from '../../hooks/useBusinessOAuthCredentials';
import { usePlanFeatures } from '../../hooks/usePlanFeatures';
import { LockedSection } from '../../components/UpgradePrompt';
// Provider display names and icons
const providerInfo: Record<string, { name: string; icon: string }> = {
@@ -57,6 +59,7 @@ const AuthenticationSettings: React.FC = () => {
const [showToast, setShowToast] = useState(false);
const isOwner = user.role === 'owner';
const { canUse } = usePlanFeatures();
// Update OAuth settings when data loads
useEffect(() => {
@@ -167,10 +170,11 @@ const AuthenticationSettings: React.FC = () => {
</p>
</div>
{/* OAuth & Social Login */}
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center justify-between mb-4">
<div>
<LockedSection feature="custom_oauth" isLocked={!canUse('custom_oauth')}>
{/* OAuth & Social Login */}
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Users size={20} className="text-indigo-500" /> Social Login
</h3>
@@ -420,6 +424,7 @@ const AuthenticationSettings: React.FC = () => {
Changes saved successfully
</div>
)}
</LockedSection>
</div>
);
};

6
frontend/src/pages/settings/CommunicationSettings.tsx
View File

@@ -18,6 +18,8 @@ import {
useUpdateCreditsSettings,
} from '../../hooks/useCommunicationCredits';
import { CreditPaymentModal } from '../../components/CreditPaymentForm';
import { usePlanFeatures } from '../../hooks/usePlanFeatures';
import { LockedSection } from '../../components/UpgradePrompt';
const CommunicationSettings: React.FC = () => {
const { t } = useTranslation();
@@ -59,6 +61,7 @@ const CommunicationSettings: React.FC = () => {
const [topUpAmount, setTopUpAmount] = useState(2500);
const isOwner = user.role === 'owner';
const { canUse } = usePlanFeatures();
// Update settings form when credits data loads
useEffect(() => {
@@ -178,6 +181,8 @@ const CommunicationSettings: React.FC = () => {
)}
</div>
<LockedSection feature="sms_reminders" isLocked={!canUse('sms_reminders')}>
{/* Setup Wizard or Main Content */}
{needsSetup || showWizard ? (
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
@@ -720,6 +725,7 @@ const CommunicationSettings: React.FC = () => {
defaultAmount={topUpAmount}
onSuccess={handlePaymentSuccess}
/>
</LockedSection>
</div>
);
};

11
frontend/src/pages/settings/DomainsSettings.tsx
View File

@@ -20,6 +20,8 @@ import {
useSetPrimaryDomain
} from '../../hooks/useCustomDomains';
import DomainPurchase from '../../components/DomainPurchase';
import { usePlanFeatures } from '../../hooks/usePlanFeatures';
import { LockedSection } from '../../components/UpgradePrompt';
const DomainsSettings: React.FC = () => {
const { t } = useTranslation();
@@ -42,6 +44,7 @@ const DomainsSettings: React.FC = () => {
const [showToast, setShowToast] = useState(false);
const isOwner = user.role === 'owner';
const { canUse } = usePlanFeatures();
const handleAddDomain = () => {
if (!newDomain.trim()) return;
@@ -125,9 +128,10 @@ const DomainsSettings: React.FC = () => {
</p>
</div>
{/* Quick Domain Setup - Booking URL */}
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<LockedSection feature="custom_domain" isLocked={!canUse('custom_domain')}>
{/* Quick Domain Setup - Booking URL */}
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Link2 size={20} className="text-brand-500" /> Your Booking URL
</h3>
<div className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
@@ -326,6 +330,7 @@ const DomainsSettings: React.FC = () => {
Changes saved successfully
</div>
)}
</LockedSection>
</div>
);
};

18
frontend/src/types.ts
View File

@@ -31,6 +31,22 @@ export interface CustomDomain {
verified_at?: string;
}
export interface PlanPermissions {
sms_reminders: boolean;
webhooks: boolean;
api_access: boolean;
custom_domain: boolean;
white_label: boolean;
custom_oauth: boolean;
plugins: boolean;
export_data: boolean;
video_conferencing: boolean;
two_factor_auth: boolean;
masked_calling: boolean;
pos_system: boolean;
mobile_app: boolean;
}
export interface Business {
id: string;
name: string;
@@ -63,6 +79,8 @@ export interface Business {
resourceTypes?: ResourceTypeDefinition[]; // Custom resource types
// Platform-controlled permissions
canManageOAuthCredentials?: boolean;
// Plan permissions (what features are available based on subscription)
planPermissions?: PlanPermissions;
}
export type UserRole = 'superuser' | 'platform_manager' | 'platform_support' | 'owner' | 'manager' | 'staff' | 'resource' | 'customer';