dewedev/FEATURE_TOGGLE_GUIDE.md

Feature Toggle System - FREE vs PRO

Overview

The Advanced URL Fetch feature is now a PRO feature with a toggle system that supports FREE and PRO tiers.

Files Created

1. /src/config/features.js

Purpose: Central configuration for all FREE/PRO features

Key Functions:

• getCurrentUserTier() - Returns current user tier (static for now, will be dynamic)
• isFeatureEnabled(featureName) - Check if a feature is enabled for current user
• isProUser() - Quick check if user is PRO
• getFeatureInfo(featureName) - Get feature metadata

Current Features:

• ADVANCED_URL_FETCH - PRO only
• BULK_OPERATIONS - PRO only (placeholder)
• EXPORT_TEMPLATES - PRO only (placeholder)
• CLOUD_SYNC - PRO only (placeholder)

How to Toggle for Testing:

// In /src/config/features.js, line ~15
const staticTier = USER_TIER.FREE; // Change to USER_TIER.PRO to test

2. /src/components/ProBadge.js

Purpose: Reusable Pro badge and feature lock components

Components:

• <ProBadge /> - Shows PRO badge (3 variants: badge, button, inline)
• <ProFeatureLock /> - Shows locked feature message with upgrade prompt

Usage Examples:

// Simple badge
<ProBadge size="sm" />

// Upgrade button
<ProBadge variant="button" onClick={handleUpgrade} />

// Inline text
<ProBadge variant="inline" size="xs" />

// Feature lock message
<ProFeatureLock
  featureName="Advanced URL Fetch"
  featureDescription="Custom headers, auth, and more"
  onUpgrade={handleUpgrade}
/>

3. /src/components/AdvancedURLFetch.js (Updated)

Purpose: URL fetch component with FREE/PRO support

Changes:

• Imports feature toggle system
• Shows PRO badge on "Show Advanced Options" button
• Displays <ProFeatureLock /> when user is FREE tier
• Shows full advanced options when user is PRO tier

User Experience

FREE Tier Users:

1. See basic URL input with GET method only
2. See "Show Advanced Options" button with PRO badge
3. Click button → See feature lock message with upgrade prompt
4. Can still use basic URL fetch (current functionality)

PRO Tier Users:

1. See basic URL input with method selector (GET/POST/PUT/DELETE/PATCH)
2. See "Show Advanced Options" button (no PRO badge)
3. Click button → See full advanced options:
   • Query Parameters builder
   • Custom Headers
   • Authentication (Bearer, API Key, Basic Auth)
   • Request Body editor
   • Save/Load Presets

Integration Guide

In ObjectEditor or TableEditor:

import AdvancedURLFetch from '../components/AdvancedURLFetch';

// In component:
const [showAdvanced, setShowAdvanced] = useState(false);

const handleUpgrade = () => {
  // Navigate to pricing page or show upgrade modal
  alert('Upgrade to PRO!');
};

// In JSX:
<AdvancedURLFetch
  url={fetchUrl}
  onUrlChange={setFetchUrl}
  onFetch={handleFetchData}
  fetching={fetching}
  showAdvanced={showAdvanced}
  onToggleAdvanced={() => setShowAdvanced(!showAdvanced)}
  onUpgrade={handleUpgrade}
/>

Future: Dynamic Tier from Database

When implementing authentication and database:

// /src/config/features.js
export const getCurrentUserTier = () => {
  // Replace static tier with:
  const user = getUserFromAuth(); // Your auth function
  return user?.tier || USER_TIER.FREE;
};

// Or with API call:
export const getCurrentUserTier = async () => {
  const response = await fetch('/api/user/tier');
  const data = await response.json();
  return data.tier || USER_TIER.FREE;
};

Adding New PRO Features

1. Add to features.js:

export const FEATURES = {
  // ... existing features
  
  MY_NEW_FEATURE: {
    name: 'My New Feature',
    description: 'Description of what it does',
    tier: USER_TIER.PRO,
    enabled: (userTier) => userTier === USER_TIER.PRO
  }
};

2. Use in component:

import { isFeatureEnabled } from '../config/features';

const MyComponent = () => {
  const isEnabled = isFeatureEnabled('MY_NEW_FEATURE');
  
  return (
    <div>
      {isEnabled ? (
        <ProFeature />
      ) : (
        <ProFeatureLock featureName="My New Feature" />
      )}
    </div>
  );
};

Testing

Test as FREE user:

1. Keep staticTier = USER_TIER.FREE in features.js
2. Run dev server: npm start
3. Go to Object Editor → URL tab
4. Click "Show Advanced Options"
5. Should see PRO lock message

Test as PRO user:

1. Change to staticTier = USER_TIER.PRO in features.js
2. Restart dev server
3. Go to Object Editor → URL tab
4. Click "Show Advanced Options"
5. Should see full advanced options

Benefits

✅ Clean Separation: FREE and PRO features clearly separated ✅ Easy Testing: Toggle tier with one line change ✅ Reusable Components: ProBadge and ProFeatureLock can be used anywhere ✅ Future-Ready: Easy to connect to real authentication/database ✅ User-Friendly: Clear upgrade prompts with feature descriptions ✅ Maintainable: All feature flags in one central location

Next Steps

1. ✅ Feature toggle system created
2. ✅ Pro badge components created
3. ✅ AdvancedURLFetch updated with FREE/PRO support
4. ⏳ Integrate into ObjectEditor
5. ⏳ Integrate into TableEditor
6. ⏳ Create pricing/upgrade page
7. ⏳ Implement authentication system
8. ⏳ Connect to database for dynamic tier management