b3e2c1f324
- Updated all API endpoint strings in 'frontend/src' (via sed and manual fixes) to remove the '/api/' prefix. - Manually fixed 'Timeline.tsx' absolute URLs to use the 'api' subdomain and correct path. - Manually fixed 'useAuth.ts' logout fetch URLs. - Updated 'HelpApiDocs.tsx' sandbox URL. - This change, combined with the backend URL update, fully transitions the application to use subdomain-based routing (e.g., 'http://api.lvh.me:8000/resource/') instead of path-prefix routing (e.g., 'http://api.lvh.me:8000/api/resource/').
709 lines
31 KiB
TypeScript
709 lines
31 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
ShoppingBag,
|
|
Search,
|
|
Star,
|
|
Download,
|
|
Zap,
|
|
Filter,
|
|
X,
|
|
CheckCircle,
|
|
Mail,
|
|
BarChart3,
|
|
Users,
|
|
Calendar,
|
|
Link as LinkIcon,
|
|
Bot,
|
|
Package,
|
|
Eye,
|
|
ChevronDown,
|
|
AlertTriangle,
|
|
Clock,
|
|
Settings,
|
|
ArrowRight
|
|
} from 'lucide-react';
|
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
import api from '../api/client';
|
|
import { PluginTemplate, PluginCategory } from '../types';
|
|
|
|
// Category icon mapping
|
|
const categoryIcons: Record<PluginCategory, React.ReactNode> = {
|
|
EMAIL: <Mail className="h-4 w-4" />,
|
|
REPORTS: <BarChart3 className="h-4 w-4" />,
|
|
CUSTOMER: <Users className="h-4 w-4" />,
|
|
BOOKING: <Calendar className="h-4 w-4" />,
|
|
INTEGRATION: <LinkIcon className="h-4 w-4" />,
|
|
AUTOMATION: <Bot className="h-4 w-4" />,
|
|
OTHER: <Package className="h-4 w-4" />,
|
|
};
|
|
|
|
// Category colors
|
|
const categoryColors: Record<PluginCategory, string> = {
|
|
EMAIL: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
|
REPORTS: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
|
|
CUSTOMER: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
|
BOOKING: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
|
INTEGRATION: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300',
|
|
AUTOMATION: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300',
|
|
OTHER: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
|
|
};
|
|
|
|
// Helper function to detect platform-only code
|
|
const detectPlatformOnlyCode = (code: string): { hasPlatformCode: boolean; warnings: string[] } => {
|
|
const warnings: string[] = [];
|
|
|
|
if (code.includes('{{PLATFORM:')) {
|
|
warnings.push('This code uses platform-only features that require special permissions');
|
|
}
|
|
|
|
if (code.includes('{{WHITELIST:')) {
|
|
warnings.push('This code requires whitelisting by platform administrators');
|
|
}
|
|
|
|
if (code.includes('{{SUPERUSER:')) {
|
|
warnings.push('This code requires superuser privileges to execute');
|
|
}
|
|
|
|
if (code.includes('{{SYSTEM:')) {
|
|
warnings.push('This code accesses system-level features');
|
|
}
|
|
|
|
return {
|
|
hasPlatformCode: warnings.length > 0,
|
|
warnings
|
|
};
|
|
};
|
|
|
|
const PluginMarketplace: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedCategory, setSelectedCategory] = useState<PluginCategory | 'ALL'>('ALL');
|
|
const [selectedPlugin, setSelectedPlugin] = useState<PluginTemplate | null>(null);
|
|
const [showDetailsModal, setShowDetailsModal] = useState(false);
|
|
const [showCode, setShowCode] = useState(false);
|
|
const [isLoadingDetails, setIsLoadingDetails] = useState(false);
|
|
const [showWhatsNextModal, setShowWhatsNextModal] = useState(false);
|
|
const [installedPluginId, setInstalledPluginId] = useState<string | null>(null);
|
|
|
|
// Fetch marketplace plugins
|
|
const { data: plugins = [], isLoading, error } = useQuery<PluginTemplate[]>({
|
|
queryKey: ['plugin-templates', 'marketplace'],
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/plugin-templates/?view=marketplace');
|
|
return data.map((p: any) => ({
|
|
id: String(p.id),
|
|
name: p.name,
|
|
description: p.description,
|
|
category: p.category,
|
|
version: p.version,
|
|
author: p.author_name,
|
|
rating: parseFloat(p.rating_average || 0),
|
|
ratingCount: parseInt(p.rating_count || 0),
|
|
installCount: parseInt(p.install_count || 0),
|
|
isVerified: p.visibility === 'PLATFORM',
|
|
isFeatured: p.is_featured || false,
|
|
createdAt: p.created_at,
|
|
updatedAt: p.updated_at,
|
|
logoUrl: p.logo_url,
|
|
pluginCode: p.plugin_code,
|
|
}));
|
|
},
|
|
});
|
|
|
|
// Fetch installed plugins to check which are already installed
|
|
const { data: installedPlugins = [] } = useQuery<{ template: number }[]>({
|
|
queryKey: ['plugin-installations'],
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/plugin-installations/');
|
|
return data;
|
|
},
|
|
});
|
|
|
|
// Create a set of installed template IDs for quick lookup
|
|
const installedTemplateIds = useMemo(() => {
|
|
return new Set(installedPlugins.map(p => String(p.template)));
|
|
}, [installedPlugins]);
|
|
|
|
// Install plugin mutation
|
|
const installMutation = useMutation({
|
|
mutationFn: async (templateId: string) => {
|
|
const { data } = await api.post('/plugin-installations/', {
|
|
template: templateId,
|
|
});
|
|
return data;
|
|
},
|
|
onSuccess: (data) => {
|
|
queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
|
|
setShowDetailsModal(false);
|
|
// Show What's Next modal
|
|
setInstalledPluginId(data.id);
|
|
setShowWhatsNextModal(true);
|
|
},
|
|
});
|
|
|
|
// Filter plugins
|
|
const filteredPlugins = useMemo(() => {
|
|
let result = plugins;
|
|
|
|
// Filter by category
|
|
if (selectedCategory !== 'ALL') {
|
|
result = result.filter(p => p.category === selectedCategory);
|
|
}
|
|
|
|
// Filter by search query
|
|
if (searchQuery.trim()) {
|
|
const query = searchQuery.toLowerCase();
|
|
result = result.filter(p =>
|
|
p.name.toLowerCase().includes(query) ||
|
|
p.description.toLowerCase().includes(query) ||
|
|
p.author.toLowerCase().includes(query)
|
|
);
|
|
}
|
|
|
|
return result;
|
|
}, [plugins, selectedCategory, searchQuery]);
|
|
|
|
// Sort: Featured first, then by rating, then by install count
|
|
const sortedPlugins = useMemo(() => {
|
|
return [...filteredPlugins].sort((a, b) => {
|
|
if (a.isFeatured && !b.isFeatured) return -1;
|
|
if (!a.isFeatured && b.isFeatured) return 1;
|
|
if (a.rating !== b.rating) return b.rating - a.rating;
|
|
return b.installCount - a.installCount;
|
|
});
|
|
}, [filteredPlugins]);
|
|
|
|
const handleInstall = async (plugin: PluginTemplate) => {
|
|
setSelectedPlugin(plugin);
|
|
setShowDetailsModal(true);
|
|
setShowCode(false);
|
|
|
|
// Fetch full plugin details including plugin_code
|
|
setIsLoadingDetails(true);
|
|
try {
|
|
const { data } = await api.get(`/plugin-templates/${plugin.id}/`);
|
|
setSelectedPlugin({
|
|
...plugin,
|
|
pluginCode: data.plugin_code,
|
|
logoUrl: data.logo_url,
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to fetch plugin details:', error);
|
|
} finally {
|
|
setIsLoadingDetails(false);
|
|
}
|
|
};
|
|
|
|
const confirmInstall = () => {
|
|
if (selectedPlugin) {
|
|
installMutation.mutate(selectedPlugin.id);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="p-8">
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="p-8">
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
|
<p className="text-red-800 dark:text-red-300">
|
|
{t('common.error')}: {error instanceof Error ? error.message : 'Unknown error'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-8 space-y-6 max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<ShoppingBag className="h-7 w-7 text-brand-600" />
|
|
{t('plugins.marketplace', 'Plugin Marketplace')}
|
|
</h2>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-1">
|
|
{t('plugins.marketplaceDescription', 'Extend your business with powerful plugins')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 shadow-sm">
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
{/* Search Bar */}
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder={t('plugins.searchPlugins', 'Search plugins...')}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Category Filter */}
|
|
<div className="flex items-center gap-2">
|
|
<Filter className="h-5 w-5 text-gray-400" />
|
|
<select
|
|
value={selectedCategory}
|
|
onChange={(e) => setSelectedCategory(e.target.value as PluginCategory | 'ALL')}
|
|
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
|
>
|
|
<option value="ALL">{t('plugins.allCategories', 'All Categories')}</option>
|
|
<option value="EMAIL">{t('plugins.categoryEmail', 'Email')}</option>
|
|
<option value="REPORTS">{t('plugins.categoryReports', 'Reports')}</option>
|
|
<option value="CUSTOMER">{t('plugins.categoryCustomer', 'Customer')}</option>
|
|
<option value="BOOKING">{t('plugins.categoryBooking', 'Booking')}</option>
|
|
<option value="INTEGRATION">{t('plugins.categoryIntegration', 'Integration')}</option>
|
|
<option value="AUTOMATION">{t('plugins.categoryAutomation', 'Automation')}</option>
|
|
<option value="OTHER">{t('plugins.categoryOther', 'Other')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Filters Summary */}
|
|
{(searchQuery || selectedCategory !== 'ALL') && (
|
|
<div className="flex items-center gap-2 mt-4">
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t('plugins.showingResults', 'Showing')} {sortedPlugins.length} {t('plugins.results', 'results')}
|
|
</span>
|
|
{(searchQuery || selectedCategory !== 'ALL') && (
|
|
<button
|
|
onClick={() => {
|
|
setSearchQuery('');
|
|
setSelectedCategory('ALL');
|
|
}}
|
|
className="text-sm text-brand-600 dark:text-brand-400 hover:underline"
|
|
>
|
|
{t('common.clearAll', 'Clear all')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Plugin Grid */}
|
|
{sortedPlugins.length === 0 ? (
|
|
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
|
|
<ShoppingBag className="h-12 w-12 mx-auto text-gray-400 mb-4" />
|
|
<p className="text-gray-500 dark:text-gray-400">
|
|
{searchQuery || selectedCategory !== 'ALL'
|
|
? t('plugins.noPluginsFound', 'No plugins found matching your criteria')
|
|
: t('plugins.noPluginsAvailable', 'No plugins available yet')}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{sortedPlugins.map((plugin) => (
|
|
<div
|
|
key={plugin.id}
|
|
className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col"
|
|
>
|
|
{/* Plugin Card Header */}
|
|
<div className="p-6 flex-1">
|
|
<div className="flex items-start gap-3 mb-3">
|
|
{/* Logo */}
|
|
{plugin.logoUrl ? (
|
|
<img
|
|
src={plugin.logoUrl}
|
|
alt={`${plugin.name} logo`}
|
|
className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
|
|
/>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
|
|
<Package className="h-6 w-6 text-gray-400" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${categoryColors[plugin.category]}`}>
|
|
{categoryIcons[plugin.category]}
|
|
{plugin.category}
|
|
</span>
|
|
{plugin.isFeatured && (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
|
<Zap className="h-3 w-3" />
|
|
Featured
|
|
</span>
|
|
)}
|
|
{installedTemplateIds.has(plugin.id) && (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
|
|
<CheckCircle className="h-3 w-3" />
|
|
Installed
|
|
</span>
|
|
)}
|
|
</div>
|
|
{plugin.isVerified && (
|
|
<CheckCircle className="h-5 w-5 text-blue-500 flex-shrink-0" title="Verified" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
{plugin.name}
|
|
</h3>
|
|
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
|
{plugin.description}
|
|
</p>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
|
<div className="flex items-center gap-1">
|
|
<Star className="h-4 w-4 text-amber-500 fill-amber-500" />
|
|
<span className="font-medium">{plugin.rating.toFixed(1)}</span>
|
|
<span className="text-xs">({plugin.ratingCount})</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Download className="h-4 w-4" />
|
|
<span>{plugin.installCount.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 text-xs text-gray-400 dark:text-gray-500">
|
|
by {plugin.author} • v{plugin.version}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Plugin Card Actions */}
|
|
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-100 dark:border-gray-700">
|
|
<button
|
|
onClick={() => handleInstall(plugin)}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium text-sm"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
{t('plugins.view', 'View')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Plugin Details Modal */}
|
|
{showDetailsModal && selectedPlugin && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
|
{/* Modal Header */}
|
|
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{/* Logo in modal header */}
|
|
{selectedPlugin.logoUrl ? (
|
|
<img
|
|
src={selectedPlugin.logoUrl}
|
|
alt={`${selectedPlugin.name} logo`}
|
|
className="w-10 h-10 rounded-lg object-cover flex-shrink-0"
|
|
/>
|
|
) : (
|
|
<div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
|
|
<Package className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
|
{selectedPlugin.name}
|
|
</h3>
|
|
{selectedPlugin.isVerified && (
|
|
<CheckCircle className="h-5 w-5 text-blue-500" title="Verified" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setShowDetailsModal(false);
|
|
setSelectedPlugin(null);
|
|
setShowCode(false);
|
|
}}
|
|
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal Body */}
|
|
<div className="p-6 space-y-6 overflow-y-auto flex-1">
|
|
{isLoadingDetails ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium ${categoryColors[selectedPlugin.category]}`}>
|
|
{categoryIcons[selectedPlugin.category]}
|
|
{selectedPlugin.category}
|
|
</span>
|
|
{selectedPlugin.isFeatured && (
|
|
<span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
|
<Zap className="h-4 w-4" />
|
|
Featured
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
|
{t('plugins.description', 'Description')}
|
|
</h4>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
{selectedPlugin.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
|
{t('plugins.version', 'Version')}
|
|
</h4>
|
|
<p className="text-gray-600 dark:text-gray-400">{selectedPlugin.version}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
|
{t('plugins.author', 'Author')}
|
|
</h4>
|
|
<p className="text-gray-600 dark:text-gray-400">{selectedPlugin.author}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Star className="h-5 w-5 text-amber-500 fill-amber-500" />
|
|
<span className="font-semibold text-gray-900 dark:text-white">
|
|
{selectedPlugin.rating.toFixed(1)}
|
|
</span>
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
({selectedPlugin.ratingCount} {t('plugins.ratings', 'ratings')})
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Download className="h-5 w-5 text-gray-400" />
|
|
<span className="text-gray-600 dark:text-gray-400">
|
|
{selectedPlugin.installCount.toLocaleString()} {t('plugins.installs', 'installs')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Code Viewer Section */}
|
|
{selectedPlugin.pluginCode && (
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => setShowCode(!showCode)}
|
|
className="flex items-center justify-between w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
|
>
|
|
<span className="font-semibold text-gray-900 dark:text-white">
|
|
{t('plugins.viewCode', 'View Code')}
|
|
</span>
|
|
<ChevronDown
|
|
className={`h-5 w-5 text-gray-600 dark:text-gray-400 transition-transform ${showCode ? 'rotate-180' : ''}`}
|
|
/>
|
|
</button>
|
|
|
|
{showCode && (
|
|
<div className="space-y-3">
|
|
{/* Platform-only code warnings */}
|
|
{(() => {
|
|
const { hasPlatformCode, warnings } = detectPlatformOnlyCode(selectedPlugin.pluginCode || '');
|
|
return hasPlatformCode ? (
|
|
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<h5 className="font-semibold text-amber-900 dark:text-amber-200 mb-2">
|
|
{t('plugins.platformOnlyWarning', 'Platform-Only Features Detected')}
|
|
</h5>
|
|
<ul className="space-y-1 text-sm text-amber-800 dark:text-amber-300">
|
|
{warnings.map((warning, idx) => (
|
|
<li key={idx} className="flex items-start gap-2">
|
|
<span className="text-amber-600 dark:text-amber-400 mt-0.5">•</span>
|
|
<span>{warning}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
})()}
|
|
|
|
{/* Code display with syntax highlighting */}
|
|
<div className="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
|
|
<SyntaxHighlighter
|
|
language="javascript"
|
|
style={vscDarkPlus}
|
|
customStyle={{
|
|
margin: 0,
|
|
borderRadius: 0,
|
|
fontSize: '0.875rem',
|
|
maxHeight: '400px'
|
|
}}
|
|
showLineNumbers
|
|
>
|
|
{selectedPlugin.pluginCode}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal Footer */}
|
|
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
|
|
<button
|
|
onClick={() => {
|
|
setShowDetailsModal(false);
|
|
setSelectedPlugin(null);
|
|
setShowCode(false);
|
|
}}
|
|
className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-medium"
|
|
>
|
|
{installedTemplateIds.has(selectedPlugin.id) ? t('common.close', 'Close') : t('common.cancel', 'Cancel')}
|
|
</button>
|
|
{installedTemplateIds.has(selectedPlugin.id) ? (
|
|
<button
|
|
onClick={() => {
|
|
setShowDetailsModal(false);
|
|
setSelectedPlugin(null);
|
|
setShowCode(false);
|
|
navigate('/plugins/my-plugins');
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
|
|
>
|
|
<CheckCircle className="h-4 w-4" />
|
|
{t('plugins.viewInstalled', 'View in My Plugins')}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={confirmInstall}
|
|
disabled={installMutation.isPending || isLoadingDetails}
|
|
className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
|
>
|
|
{installMutation.isPending ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
{t('plugins.installing', 'Installing...')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="h-4 w-4" />
|
|
{t('plugins.install', 'Install')}
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* What's Next Modal - shown after successful install */}
|
|
{showWhatsNextModal && selectedPlugin && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl max-w-lg w-full shadow-2xl overflow-hidden">
|
|
{/* Success Header */}
|
|
<div className="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-8 text-center">
|
|
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle className="w-10 h-10 text-white" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-white mb-2">
|
|
Plugin Installed!
|
|
</h2>
|
|
<p className="text-green-100">
|
|
{selectedPlugin.name} is ready to use
|
|
</p>
|
|
</div>
|
|
|
|
{/* What's Next Options */}
|
|
<div className="p-6 space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
What would you like to do?
|
|
</h3>
|
|
|
|
{/* Schedule Task Option */}
|
|
<button
|
|
onClick={() => {
|
|
setShowWhatsNextModal(false);
|
|
setSelectedPlugin(null);
|
|
navigate('/tasks');
|
|
}}
|
|
className="w-full flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors text-left group"
|
|
>
|
|
<div className="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
|
<Clock className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-gray-900 dark:text-white">
|
|
Schedule it
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Run automatically on a schedule (hourly, daily, etc.)
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
|
|
</button>
|
|
|
|
{/* Configure Option */}
|
|
<button
|
|
onClick={() => {
|
|
setShowWhatsNextModal(false);
|
|
setSelectedPlugin(null);
|
|
navigate('/plugins/my-plugins');
|
|
}}
|
|
className="w-full flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-500 dark:hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors text-left group"
|
|
>
|
|
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
|
<Settings className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-gray-900 dark:text-white">
|
|
Configure settings
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Set up plugin options and customize behavior
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" />
|
|
</button>
|
|
|
|
{/* Done Option */}
|
|
<button
|
|
onClick={() => {
|
|
setShowWhatsNextModal(false);
|
|
setSelectedPlugin(null);
|
|
}}
|
|
className="w-full p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-center"
|
|
>
|
|
Done for now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PluginMarketplace;
|