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/').
770 lines
33 KiB
TypeScript
770 lines
33 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Package,
|
|
Plus,
|
|
Trash2,
|
|
Star,
|
|
RefreshCw,
|
|
CheckCircle,
|
|
XCircle,
|
|
Mail,
|
|
BarChart3,
|
|
Users,
|
|
Calendar,
|
|
Link as LinkIcon,
|
|
Bot,
|
|
Package as PackageIcon,
|
|
X,
|
|
AlertTriangle,
|
|
Clock,
|
|
Settings
|
|
} from 'lucide-react';
|
|
import api from '../api/client';
|
|
import { PluginInstallation, PluginCategory } from '../types';
|
|
import EmailTemplateSelector from '../components/EmailTemplateSelector';
|
|
|
|
// 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: <PackageIcon 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',
|
|
};
|
|
|
|
const MyPlugins: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const [selectedPlugin, setSelectedPlugin] = useState<PluginInstallation | null>(null);
|
|
const [showUninstallModal, setShowUninstallModal] = useState(false);
|
|
const [showRatingModal, setShowRatingModal] = useState(false);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [rating, setRating] = useState(0);
|
|
const [review, setReview] = useState('');
|
|
const [configValues, setConfigValues] = useState<Record<string, any>>({});
|
|
|
|
// Fetch installed plugins
|
|
const { data: plugins = [], isLoading, error } = useQuery<PluginInstallation[]>({
|
|
queryKey: ['plugin-installations'],
|
|
queryFn: async () => {
|
|
const { data } = await api.get('/plugin-installations/');
|
|
return data.map((p: any) => ({
|
|
id: String(p.id),
|
|
template: String(p.template),
|
|
templateName: p.template_name || p.templateName,
|
|
templateDescription: p.template_description || p.templateDescription,
|
|
category: p.category,
|
|
version: p.version,
|
|
authorName: p.author_name || p.authorName,
|
|
logoUrl: p.logo_url || p.logoUrl,
|
|
templateVariables: p.template_variables || p.templateVariables || {},
|
|
configValues: p.config_values || p.configValues || {},
|
|
isActive: p.is_active !== undefined ? p.is_active : p.isActive,
|
|
installedAt: p.installed_at || p.installedAt,
|
|
hasUpdate: p.has_update !== undefined ? p.has_update : p.hasUpdate || false,
|
|
rating: p.rating,
|
|
review: p.review,
|
|
}));
|
|
},
|
|
});
|
|
|
|
// Uninstall plugin mutation
|
|
const uninstallMutation = useMutation({
|
|
mutationFn: async (pluginId: string) => {
|
|
await api.delete(`/plugin-installations/${pluginId}/`);
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
|
|
setShowUninstallModal(false);
|
|
setSelectedPlugin(null);
|
|
},
|
|
});
|
|
|
|
// Rate plugin mutation
|
|
const rateMutation = useMutation({
|
|
mutationFn: async ({ pluginId, rating, review }: { pluginId: string; rating: number; review: string }) => {
|
|
const { data } = await api.post(`/plugin-installations/${pluginId}/rate/`, {
|
|
rating,
|
|
review,
|
|
});
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
|
|
setShowRatingModal(false);
|
|
setSelectedPlugin(null);
|
|
setRating(0);
|
|
setReview('');
|
|
},
|
|
});
|
|
|
|
// Update plugin mutation
|
|
const updateMutation = useMutation({
|
|
mutationFn: async (pluginId: string) => {
|
|
const { data } = await api.post(`/plugin-installations/${pluginId}/update/`);
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
|
|
},
|
|
});
|
|
|
|
// Edit config mutation
|
|
const editConfigMutation = useMutation({
|
|
mutationFn: async ({ pluginId, configValues }: { pluginId: string; configValues: Record<string, any> }) => {
|
|
const { data } = await api.patch(`/plugin-installations/${pluginId}/`, {
|
|
config_values: configValues,
|
|
});
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
|
|
setShowEditModal(false);
|
|
setSelectedPlugin(null);
|
|
setConfigValues({});
|
|
},
|
|
});
|
|
|
|
const handleUninstall = (plugin: PluginInstallation) => {
|
|
setSelectedPlugin(plugin);
|
|
setShowUninstallModal(true);
|
|
};
|
|
|
|
const confirmUninstall = () => {
|
|
if (selectedPlugin) {
|
|
uninstallMutation.mutate(selectedPlugin.id);
|
|
}
|
|
};
|
|
|
|
const handleRating = (plugin: PluginInstallation) => {
|
|
setSelectedPlugin(plugin);
|
|
setRating(plugin.rating || 0);
|
|
setReview(plugin.review || '');
|
|
setShowRatingModal(true);
|
|
};
|
|
|
|
const submitRating = () => {
|
|
if (selectedPlugin && rating > 0) {
|
|
rateMutation.mutate({
|
|
pluginId: selectedPlugin.id,
|
|
rating,
|
|
review,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleUpdate = (plugin: PluginInstallation) => {
|
|
updateMutation.mutate(plugin.id);
|
|
};
|
|
|
|
const unescapeString = (str: string): string => {
|
|
return str
|
|
.replace(/\\n/g, '\n')
|
|
.replace(/\\r/g, '\r')
|
|
.replace(/\\t/g, '\t')
|
|
.replace(/\\'/g, "'")
|
|
.replace(/\\"/g, '"')
|
|
.replace(/\\\\/g, '\\');
|
|
};
|
|
|
|
const handleEdit = (plugin: PluginInstallation) => {
|
|
setSelectedPlugin(plugin);
|
|
// Convert escape sequences to actual characters for display
|
|
const displayValues = { ...plugin.configValues || {} };
|
|
if (plugin.templateVariables) {
|
|
Object.entries(plugin.templateVariables).forEach(([key, variable]: [string, any]) => {
|
|
if (displayValues[key]) {
|
|
displayValues[key] = unescapeString(displayValues[key]);
|
|
}
|
|
});
|
|
}
|
|
setConfigValues(displayValues);
|
|
setShowEditModal(true);
|
|
};
|
|
|
|
const escapeString = (str: string): string => {
|
|
return str
|
|
.replace(/\\/g, '\\\\') // Escape backslashes first
|
|
.replace(/\n/g, '\\n')
|
|
.replace(/\r/g, '\\r')
|
|
.replace(/\t/g, '\\t')
|
|
.replace(/'/g, "\\'")
|
|
.replace(/"/g, '\\"');
|
|
};
|
|
|
|
const submitConfigEdit = () => {
|
|
if (selectedPlugin) {
|
|
// Convert actual characters back to escape sequences for storage
|
|
const storageValues = { ...configValues };
|
|
if (selectedPlugin.templateVariables) {
|
|
Object.entries(selectedPlugin.templateVariables).forEach(([key, variable]: [string, any]) => {
|
|
if (storageValues[key]) {
|
|
storageValues[key] = escapeString(storageValues[key]);
|
|
}
|
|
});
|
|
}
|
|
editConfigMutation.mutate({
|
|
pluginId: selectedPlugin.id,
|
|
configValues: storageValues,
|
|
});
|
|
}
|
|
};
|
|
|
|
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">
|
|
<Package className="h-7 w-7 text-brand-600" />
|
|
{t('plugins.myPlugins', 'My Plugins')}
|
|
</h2>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-1">
|
|
{t('plugins.myPluginsDescription', 'Manage your installed plugins')}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => navigate('/plugins/marketplace')}
|
|
className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium"
|
|
>
|
|
<Plus className="h-5 w-5" />
|
|
{t('plugins.browseMarketplace', 'Browse Marketplace')}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Plugin List */}
|
|
{plugins.length === 0 ? (
|
|
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
|
|
<Package className="h-12 w-12 mx-auto text-gray-400 mb-4" />
|
|
<p className="text-gray-500 dark:text-gray-400 mb-4">
|
|
{t('plugins.noPluginsInstalled', 'No plugins installed yet')}
|
|
</p>
|
|
<button
|
|
onClick={() => navigate('/plugins/marketplace')}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{t('plugins.browseMarketplace', 'Browse Marketplace')}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{plugins.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 cursor-pointer"
|
|
onClick={() => handleEdit(plugin)}
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex items-start justify-between">
|
|
{/* Plugin Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
{plugin.logoUrl && (
|
|
<img
|
|
src={plugin.logoUrl}
|
|
alt={`${plugin.templateName} logo`}
|
|
className="w-10 h-10 rounded-lg object-cover flex-shrink-0"
|
|
onError={(e) => {
|
|
// Hide image if it fails to load
|
|
e.currentTarget.style.display = 'none';
|
|
}}
|
|
/>
|
|
)}
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{plugin.templateName}
|
|
</h3>
|
|
<span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${categoryColors[plugin.category]}`}>
|
|
{categoryIcons[plugin.category]}
|
|
{plugin.category}
|
|
</span>
|
|
{plugin.hasUpdate && (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
|
|
<RefreshCw className="h-3 w-3" />
|
|
Update Available
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
|
{plugin.templateDescription}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
|
|
{plugin.authorName && (
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-medium">
|
|
{t('plugins.author', 'Author')}:
|
|
</span>
|
|
<span>{plugin.authorName}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-medium">
|
|
{t('plugins.version', 'Version')}:
|
|
</span>
|
|
<span>{plugin.version}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-medium">
|
|
{t('plugins.installedOn', 'Installed on')}:
|
|
</span>
|
|
<span>
|
|
{new Date(plugin.installedAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{plugin.isActive ? (
|
|
<>
|
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
|
<span className="text-green-600 dark:text-green-400 font-medium">
|
|
{t('plugins.active', 'Active')}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="h-4 w-4 text-gray-400" />
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
{t('plugins.inactive', 'Inactive')}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
{plugin.rating && (
|
|
<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}/5</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-2 ml-4">
|
|
{/* Schedule button - only if not already scheduled */}
|
|
{!plugin.scheduledTaskId && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigate('/tasks');
|
|
}}
|
|
className="flex items-center gap-2 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
|
|
title={t('plugins.schedule', 'Schedule')}
|
|
>
|
|
<Clock className="h-4 w-4" />
|
|
{t('plugins.schedule', 'Schedule')}
|
|
</button>
|
|
)}
|
|
{/* Already scheduled indicator */}
|
|
{plugin.scheduledTaskId && (
|
|
<span className="flex items-center gap-1.5 px-3 py-2 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-lg text-sm font-medium">
|
|
<Clock className="h-4 w-4" />
|
|
{t('plugins.scheduled', 'Scheduled')}
|
|
</span>
|
|
)}
|
|
{plugin.hasUpdate && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleUpdate(plugin);
|
|
}}
|
|
disabled={updateMutation.isPending}
|
|
className="flex items-center gap-2 px-3 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm font-medium"
|
|
title={t('plugins.update', 'Update')}
|
|
>
|
|
{updateMutation.isPending ? (
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
) : (
|
|
<RefreshCw className="h-4 w-4" />
|
|
)}
|
|
{t('plugins.update', 'Update')}
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleRating(plugin);
|
|
}}
|
|
className="flex items-center gap-2 px-3 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 text-sm font-medium"
|
|
title={plugin.rating ? t('plugins.editRating', 'Edit Rating') : t('plugins.rate', 'Rate')}
|
|
>
|
|
<Star className={`h-4 w-4 ${plugin.rating ? 'fill-amber-500 text-amber-500' : ''}`} />
|
|
{plugin.rating ? t('plugins.editRating', 'Edit Rating') : t('plugins.rate', 'Rate')}
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleUninstall(plugin);
|
|
}}
|
|
className="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
|
title={t('plugins.uninstall', 'Uninstall')}
|
|
>
|
|
<Trash2 className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Info Box */}
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="shrink-0 p-2 bg-blue-100 dark:bg-blue-900/40 rounded-lg">
|
|
<Package className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-2">
|
|
{t('plugins.needCustomPlugin', 'Need a custom plugin?')}
|
|
</h3>
|
|
<p className="text-blue-800 dark:text-blue-200 mb-4">
|
|
{t('plugins.customPluginDescription', 'Create your own custom plugins to extend your business functionality with specific features tailored to your needs.')}
|
|
</p>
|
|
<button
|
|
onClick={() => navigate('/plugins/create')}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{t('plugins.createCustomPlugin', 'Create Custom Plugin')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Uninstall Confirmation Modal */}
|
|
{showUninstallModal && 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-md w-full overflow-hidden">
|
|
{/* 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">
|
|
<div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-lg">
|
|
<AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('plugins.confirmUninstall', 'Confirm Uninstall')}
|
|
</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setShowUninstallModal(false);
|
|
setSelectedPlugin(null);
|
|
}}
|
|
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">
|
|
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
|
{t('plugins.uninstallWarning', 'Are you sure you want to uninstall')} <span className="font-semibold text-gray-900 dark:text-white">{selectedPlugin.templateName}</span>?
|
|
</p>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t('plugins.uninstallNote', 'This action cannot be undone. Your plugin data and settings will be removed.')}
|
|
</p>
|
|
</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={() => {
|
|
setShowUninstallModal(false);
|
|
setSelectedPlugin(null);
|
|
}}
|
|
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"
|
|
>
|
|
{t('common.cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
onClick={confirmUninstall}
|
|
disabled={uninstallMutation.isPending}
|
|
className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
|
>
|
|
{uninstallMutation.isPending ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
{t('plugins.uninstalling', 'Uninstalling...')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Trash2 className="h-4 w-4" />
|
|
{t('plugins.uninstall', 'Uninstall')}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Rating Modal */}
|
|
{showRatingModal && 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-md w-full overflow-hidden">
|
|
{/* Modal Header */}
|
|
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('plugins.ratePlugin', 'Rate Plugin')}
|
|
</h3>
|
|
<button
|
|
onClick={() => {
|
|
setShowRatingModal(false);
|
|
setSelectedPlugin(null);
|
|
setRating(0);
|
|
setReview('');
|
|
}}
|
|
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-4">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">
|
|
{selectedPlugin.templateName}
|
|
</h4>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t('plugins.rateDescription', 'Share your experience with this plugin')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Star Rating */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t('plugins.yourRating', 'Your Rating')} *
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
type="button"
|
|
onClick={() => setRating(star)}
|
|
className="p-1 hover:scale-110 transition-transform"
|
|
>
|
|
<Star
|
|
className={`h-8 w-8 ${
|
|
star <= rating
|
|
? 'fill-amber-500 text-amber-500'
|
|
: 'text-gray-300 dark:text-gray-600'
|
|
}`}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Review */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{t('plugins.review', 'Review')} ({t('plugins.optional', 'optional')})
|
|
</label>
|
|
<textarea
|
|
value={review}
|
|
onChange={(e) => setReview(e.target.value)}
|
|
rows={4}
|
|
className="w-full px-3 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 resize-none"
|
|
placeholder={t('plugins.reviewPlaceholder', 'Share your thoughts about this plugin...')}
|
|
/>
|
|
</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={() => {
|
|
setShowRatingModal(false);
|
|
setSelectedPlugin(null);
|
|
setRating(0);
|
|
setReview('');
|
|
}}
|
|
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"
|
|
>
|
|
{t('common.cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
onClick={submitRating}
|
|
disabled={rating === 0 || rateMutation.isPending}
|
|
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"
|
|
>
|
|
{rateMutation.isPending ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
{t('plugins.submitting', 'Submitting...')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Star className="h-4 w-4" />
|
|
{t('plugins.submitRating', 'Submit Rating')}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Config Modal */}
|
|
{showEditModal && 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 overflow-hidden max-h-[80vh] 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">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('plugins.editConfig', 'Edit Plugin Configuration')}
|
|
</h3>
|
|
<button
|
|
onClick={() => {
|
|
setShowEditModal(false);
|
|
setSelectedPlugin(null);
|
|
setConfigValues({});
|
|
}}
|
|
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 overflow-y-auto flex-1">
|
|
<div className="mb-4">
|
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">
|
|
{selectedPlugin.templateName}
|
|
</h4>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{selectedPlugin.templateDescription}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Config Fields */}
|
|
{selectedPlugin.templateVariables && Object.keys(selectedPlugin.templateVariables).length > 0 ? (
|
|
<div className="space-y-4">
|
|
{Object.entries(selectedPlugin.templateVariables).map(([key, variable]: [string, any]) => (
|
|
<div key={key}>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{variable.description || key}
|
|
{variable.required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
|
|
{variable.type === 'email_template' ? (
|
|
<EmailTemplateSelector
|
|
value={configValues[key] || variable.default}
|
|
onChange={(templateId) => setConfigValues({ ...configValues, [key]: templateId })}
|
|
required={variable.required}
|
|
/>
|
|
) : variable.type === 'textarea' ? (
|
|
<textarea
|
|
value={configValues[key] !== undefined ? configValues[key] : (variable.default ? unescapeString(variable.default) : '')}
|
|
onChange={(e) => setConfigValues({ ...configValues, [key]: e.target.value })}
|
|
rows={6}
|
|
className="w-full px-3 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 resize-none font-mono text-sm"
|
|
placeholder={variable.default ? unescapeString(variable.default) : ''}
|
|
/>
|
|
) : (
|
|
<input
|
|
type="text"
|
|
value={configValues[key] || variable.default || ''}
|
|
onChange={(e) => setConfigValues({ ...configValues, [key]: e.target.value })}
|
|
className="w-full px-3 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"
|
|
placeholder={variable.default || ''}
|
|
/>
|
|
)}
|
|
|
|
{variable.help_text && (
|
|
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
{variable.help_text}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
{t('plugins.noConfigOptions', 'This plugin has no configuration options')}
|
|
</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={() => {
|
|
setShowEditModal(false);
|
|
setSelectedPlugin(null);
|
|
setConfigValues({});
|
|
}}
|
|
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"
|
|
>
|
|
{t('common.cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
onClick={submitConfigEdit}
|
|
disabled={editConfigMutation.isPending}
|
|
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"
|
|
>
|
|
{editConfigMutation.isPending ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
{t('plugins.saving', 'Saving...')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckCircle className="h-4 w-4" />
|
|
{t('common.save', 'Save')}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MyPlugins;
|