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:**
```javascript
// 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:**
```jsx
// 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:

```jsx
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:

```javascript
// /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:**
```javascript
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:**
```jsx
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