feat: major update - Markdown Editor, CodeMirror upgrades, SEO improvements, tool cleanup
- Added new Markdown Editor with live preview, GFM support, PDF/HTML/DOCX export - Upgraded all paste fields to CodeMirror with syntax highlighting and expand/collapse - Enhanced Object Editor with advanced URL fetching and preview mode - Improved export views with syntax highlighting in Table/Object editors - Implemented SEO improvements (FAQ schema, breadcrumbs, internal linking) - Added Related Tools recommendations component - Created custom 404 page with tool suggestions - Consolidated tools: removed JSON, Serialize, CSV-JSON (merged into main editors) - Updated documentation and cleaned up redundant files - Updated release notes with user-centric improvements
This commit is contained in:
dwindown
198
FEATURE_TOGGLE_GUIDE.md
Normal file
198
FEATURE_TOGGLE_GUIDE.md
Normal file
@@ -0,0 +1,198 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user