3dfb1689ad
Also includes admin, dashboard, and API updates; PWA icon assets; and assorted layout and utility changes on dev.
796 lines
34 KiB
TypeScript
796 lines
34 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { useLanguage } from '@/context/LanguageContext';
|
|
import { siteSettingsApi, eventsApi, legalSettingsApi, SiteSettings, TimezoneOption, Event, LegalSettingsData } from '@/lib/api';
|
|
import { parseDate } from '@/lib/utils';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Input from '@/components/ui/Input';
|
|
import {
|
|
Cog6ToothIcon,
|
|
GlobeAltIcon,
|
|
ClockIcon,
|
|
EnvelopeIcon,
|
|
WrenchScrewdriverIcon,
|
|
CheckCircleIcon,
|
|
StarIcon,
|
|
ScaleIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import toast from 'react-hot-toast';
|
|
|
|
type SettingsTab = 'general' | 'legal';
|
|
|
|
export default function AdminSettingsPage() {
|
|
const { t, locale } = useLanguage();
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [savingLegal, setSavingLegal] = useState(false);
|
|
const [activeTab, setActiveTab] = useState<SettingsTab>('general');
|
|
const [timezones, setTimezones] = useState<TimezoneOption[]>([]);
|
|
const [featuredEvent, setFeaturedEvent] = useState<Event | null>(null);
|
|
const [clearingFeatured, setClearingFeatured] = useState(false);
|
|
|
|
const [settings, setSettings] = useState<SiteSettings>({
|
|
timezone: 'America/Asuncion',
|
|
siteName: 'Spanglish',
|
|
siteDescription: null,
|
|
siteDescriptionEs: null,
|
|
contactEmail: null,
|
|
contactPhone: null,
|
|
facebookUrl: null,
|
|
instagramUrl: null,
|
|
twitterUrl: null,
|
|
linkedinUrl: null,
|
|
featuredEventId: null,
|
|
maintenanceMode: false,
|
|
maintenanceMessage: null,
|
|
maintenanceMessageEs: null,
|
|
});
|
|
|
|
const [legalSettings, setLegalSettings] = useState<LegalSettingsData>({
|
|
companyName: null,
|
|
legalEntityName: null,
|
|
rucNumber: null,
|
|
companyAddress: null,
|
|
companyCity: null,
|
|
companyCountry: null,
|
|
supportEmail: null,
|
|
legalEmail: null,
|
|
governingLaw: null,
|
|
jurisdictionCity: null,
|
|
});
|
|
|
|
const [legalErrors, setLegalErrors] = useState<Record<string, string>>({});
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
const [settingsRes, timezonesRes, legalRes] = await Promise.all([
|
|
siteSettingsApi.get(),
|
|
siteSettingsApi.getTimezones(),
|
|
legalSettingsApi.get().catch(() => ({ settings: {} as LegalSettingsData })),
|
|
]);
|
|
setSettings(settingsRes.settings);
|
|
setTimezones(timezonesRes.timezones);
|
|
setLegalSettings(legalRes.settings);
|
|
|
|
// Load featured event details if one is set
|
|
if (settingsRes.settings.featuredEventId) {
|
|
try {
|
|
const { event } = await eventsApi.getById(settingsRes.settings.featuredEventId);
|
|
setFeaturedEvent(event);
|
|
} catch {
|
|
// Featured event may no longer exist
|
|
setFeaturedEvent(null);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
toast.error('Failed to load settings');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleClearFeatured = async () => {
|
|
setClearingFeatured(true);
|
|
try {
|
|
await siteSettingsApi.setFeaturedEvent(null);
|
|
setSettings(prev => ({ ...prev, featuredEventId: null }));
|
|
setFeaturedEvent(null);
|
|
toast.success(locale === 'es' ? 'Evento destacado eliminado' : 'Featured event removed');
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to clear featured event');
|
|
} finally {
|
|
setClearingFeatured(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const response = await siteSettingsApi.update(settings);
|
|
setSettings(response.settings);
|
|
toast.success(locale === 'es' ? 'Configuración guardada' : 'Settings saved');
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to save settings');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const validateLegalSettings = (): boolean => {
|
|
const errors: Record<string, string> = {};
|
|
|
|
// Validate email formats if provided
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (legalSettings.supportEmail && !emailRegex.test(legalSettings.supportEmail)) {
|
|
errors.supportEmail = locale === 'es' ? 'Email no válido' : 'Invalid email address';
|
|
}
|
|
if (legalSettings.legalEmail && !emailRegex.test(legalSettings.legalEmail)) {
|
|
errors.legalEmail = locale === 'es' ? 'Email no válido' : 'Invalid email address';
|
|
}
|
|
|
|
setLegalErrors(errors);
|
|
return Object.keys(errors).length === 0;
|
|
};
|
|
|
|
const handleSaveLegal = async () => {
|
|
if (!validateLegalSettings()) return;
|
|
|
|
setSavingLegal(true);
|
|
try {
|
|
const response = await legalSettingsApi.update(legalSettings);
|
|
setLegalSettings(response.settings);
|
|
toast.success(locale === 'es' ? 'Configuración legal guardada' : 'Legal settings saved');
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to save legal settings');
|
|
} finally {
|
|
setSavingLegal(false);
|
|
}
|
|
};
|
|
|
|
const updateSetting = <K extends keyof SiteSettings>(key: K, value: SiteSettings[K]) => {
|
|
setSettings((prev) => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
const updateLegalSetting = <K extends keyof LegalSettingsData>(key: K, value: LegalSettingsData[K]) => {
|
|
setLegalSettings((prev) => ({ ...prev, [key]: value }));
|
|
// Clear error for this field when user types
|
|
if (legalErrors[key]) {
|
|
setLegalErrors((prev) => {
|
|
const next = { ...prev };
|
|
delete next[key];
|
|
return next;
|
|
});
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tabs: { id: SettingsTab; label: string; labelEs: string; icon: React.ReactNode }[] = [
|
|
{
|
|
id: 'general',
|
|
label: 'General Settings',
|
|
labelEs: 'Configuración General',
|
|
icon: <Cog6ToothIcon className="w-4 h-4" />,
|
|
},
|
|
{
|
|
id: 'legal',
|
|
label: 'Legal Settings',
|
|
labelEs: 'Configuración Legal',
|
|
icon: <ScaleIcon className="w-4 h-4" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-primary-dark flex items-center gap-3">
|
|
<Cog6ToothIcon className="w-7 h-7" />
|
|
{locale === 'es' ? 'Configuración del Sitio' : 'Site Settings'}
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
{locale === 'es'
|
|
? 'Configura las opciones generales del sitio web'
|
|
: 'Configure general website settings'}
|
|
</p>
|
|
</div>
|
|
{activeTab === 'general' && (
|
|
<Button onClick={handleSave} isLoading={saving}>
|
|
<CheckCircleIcon className="w-5 h-5 mr-2" />
|
|
{locale === 'es' ? 'Guardar Cambios' : 'Save Changes'}
|
|
</Button>
|
|
)}
|
|
{activeTab === 'legal' && (
|
|
<Button onClick={handleSaveLegal} isLoading={savingLegal}>
|
|
<CheckCircleIcon className="w-5 h-5 mr-2" />
|
|
{locale === 'es' ? 'Guardar Cambios' : 'Save Changes'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="border-b border-secondary-light-gray mb-6">
|
|
<nav className="flex space-x-0" aria-label="Tabs">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-2 px-4 py-3 border-b-2 text-sm font-medium transition-colors ${
|
|
activeTab === tab.id
|
|
? 'border-primary-yellow text-primary-dark'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
{tab.icon}
|
|
{locale === 'es' ? tab.labelEs : tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* General Settings Tab */}
|
|
{activeTab === 'general' && (
|
|
<div className="space-y-6">
|
|
{/* Timezone Settings */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<ClockIcon className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Zona Horaria' : 'Timezone'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Zona horaria para mostrar las fechas de eventos'
|
|
: 'Timezone used for displaying event dates'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-md">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{locale === 'es' ? 'Zona Horaria del Sitio' : 'Site Timezone'}
|
|
</label>
|
|
<select
|
|
value={settings.timezone}
|
|
onChange={(e) => updateSetting('timezone', e.target.value)}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
>
|
|
{timezones.map((tz) => (
|
|
<option key={tz.value} value={tz.value}>
|
|
{tz.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{locale === 'es'
|
|
? 'Esta zona horaria se usará como referencia para las fechas de eventos.'
|
|
: 'This timezone will be used as reference for event dates.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Featured Event */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
|
|
<StarIcon className="w-5 h-5 text-amber-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Evento Destacado' : 'Featured Event'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'El evento destacado aparece en la página de inicio y linktree'
|
|
: 'The featured event is displayed on the homepage and linktree'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{featuredEvent ? (
|
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
{featuredEvent.bannerUrl && (
|
|
<img
|
|
src={featuredEvent.bannerUrl}
|
|
alt={featuredEvent.title}
|
|
className="w-16 h-16 rounded-lg object-cover"
|
|
/>
|
|
)}
|
|
<div>
|
|
<p className="font-medium text-amber-900">{featuredEvent.title}</p>
|
|
<p className="text-sm text-amber-700">
|
|
{parseDate(featuredEvent.startDatetime).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
timeZone: 'America/Asuncion',
|
|
})}
|
|
</p>
|
|
<p className="text-xs text-amber-600 mt-1">
|
|
{locale === 'es' ? 'Estado:' : 'Status:'} {featuredEvent.status}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Link
|
|
href="/admin/events"
|
|
className="text-sm text-amber-700 hover:text-amber-900 underline"
|
|
>
|
|
{locale === 'es' ? 'Cambiar' : 'Change'}
|
|
</Link>
|
|
<button
|
|
onClick={handleClearFeatured}
|
|
disabled={clearingFeatured}
|
|
className="text-sm text-red-600 hover:text-red-800 underline disabled:opacity-50"
|
|
>
|
|
{clearingFeatured
|
|
? (locale === 'es' ? 'Eliminando...' : 'Removing...')
|
|
: (locale === 'es' ? 'Eliminar' : 'Remove')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<p className="text-gray-600 mb-3">
|
|
{locale === 'es'
|
|
? 'No hay evento destacado. El próximo evento publicado se mostrará automáticamente.'
|
|
: 'No featured event set. The next upcoming published event will be shown automatically.'}
|
|
</p>
|
|
<Link
|
|
href="/admin/events"
|
|
className="text-sm text-primary-yellow hover:underline font-medium"
|
|
>
|
|
{locale === 'es' ? 'Ir a Eventos para destacar uno' : 'Go to Events to feature one'}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-xs text-gray-400 mt-3">
|
|
{locale === 'es'
|
|
? 'Cuando el evento destacado termine o se despublique, el sistema mostrará automáticamente el próximo evento.'
|
|
: 'When the featured event ends or is unpublished, the system will automatically show the next upcoming event.'}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Site Information */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
|
<GlobeAltIcon className="w-5 h-5 text-green-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Información del Sitio' : 'Site Information'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Información básica del sitio web'
|
|
: 'Basic website information'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="max-w-md">
|
|
<Input
|
|
label={locale === 'es' ? 'Nombre del Sitio' : 'Site Name'}
|
|
value={settings.siteName}
|
|
onChange={(e) => updateSetting('siteName', e.target.value)}
|
|
placeholder="Spanglish"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{locale === 'es' ? 'Descripción (Inglés)' : 'Description (English)'}
|
|
</label>
|
|
<textarea
|
|
value={settings.siteDescription || ''}
|
|
onChange={(e) => updateSetting('siteDescription', e.target.value || null)}
|
|
rows={3}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
placeholder="Brief site description..."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{locale === 'es' ? 'Descripción (Español)' : 'Description (Spanish)'}
|
|
</label>
|
|
<textarea
|
|
value={settings.siteDescriptionEs || ''}
|
|
onChange={(e) => updateSetting('siteDescriptionEs', e.target.value || null)}
|
|
rows={3}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
placeholder="Descripción breve del sitio..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Contact Information */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
|
|
<EnvelopeIcon className="w-5 h-5 text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Información de Contacto' : 'Contact Information'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Datos de contacto del sitio'
|
|
: 'Site contact details'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label={locale === 'es' ? 'Email de Contacto' : 'Contact Email'}
|
|
type="email"
|
|
value={settings.contactEmail || ''}
|
|
onChange={(e) => updateSetting('contactEmail', e.target.value || null)}
|
|
placeholder="contact@example.com"
|
|
/>
|
|
<Input
|
|
label={locale === 'es' ? 'Teléfono de Contacto' : 'Contact Phone'}
|
|
type="tel"
|
|
value={settings.contactPhone || ''}
|
|
onChange={(e) => updateSetting('contactPhone', e.target.value || null)}
|
|
placeholder="+595 981 123456"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-6 pt-6 border-t border-secondary-light-gray">
|
|
<h4 className="font-medium mb-4">
|
|
{locale === 'es' ? 'Redes Sociales' : 'Social Media Links'}
|
|
</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Facebook URL"
|
|
type="url"
|
|
value={settings.facebookUrl || ''}
|
|
onChange={(e) => updateSetting('facebookUrl', e.target.value || null)}
|
|
placeholder="https://facebook.com/..."
|
|
/>
|
|
<Input
|
|
label="Instagram URL"
|
|
type="url"
|
|
value={settings.instagramUrl || ''}
|
|
onChange={(e) => updateSetting('instagramUrl', e.target.value || null)}
|
|
placeholder="https://instagram.com/..."
|
|
/>
|
|
<Input
|
|
label="Twitter URL"
|
|
type="url"
|
|
value={settings.twitterUrl || ''}
|
|
onChange={(e) => updateSetting('twitterUrl', e.target.value || null)}
|
|
placeholder="https://twitter.com/..."
|
|
/>
|
|
<Input
|
|
label="LinkedIn URL"
|
|
type="url"
|
|
value={settings.linkedinUrl || ''}
|
|
onChange={(e) => updateSetting('linkedinUrl', e.target.value || null)}
|
|
placeholder="https://linkedin.com/..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Maintenance Mode */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<WrenchScrewdriverIcon className="w-5 h-5 text-orange-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Modo de Mantenimiento' : 'Maintenance Mode'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Habilita el modo de mantenimiento cuando necesites hacer cambios'
|
|
: 'Enable maintenance mode when you need to make changes'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg mb-4">
|
|
<div>
|
|
<p className="font-medium">
|
|
{locale === 'es' ? 'Modo de Mantenimiento' : 'Maintenance Mode'}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{settings.maintenanceMode
|
|
? (locale === 'es' ? 'El sitio está en mantenimiento' : 'The site is under maintenance')
|
|
: (locale === 'es' ? 'El sitio está activo' : 'The site is live')}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => updateSetting('maintenanceMode', !settings.maintenanceMode)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
settings.maintenanceMode ? 'bg-orange-500' : 'bg-gray-300'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
|
settings.maintenanceMode ? 'translate-x-6' : 'translate-x-1'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{settings.maintenanceMode && (
|
|
<div className="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-4">
|
|
<p className="text-orange-800 text-sm font-medium flex items-center gap-2">
|
|
<WrenchScrewdriverIcon className="w-4 h-4" />
|
|
{locale === 'es'
|
|
? '¡Advertencia! El modo de mantenimiento está activo.'
|
|
: 'Warning! Maintenance mode is active.'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{locale === 'es' ? 'Mensaje de Mantenimiento (Inglés)' : 'Maintenance Message (English)'}
|
|
</label>
|
|
<textarea
|
|
value={settings.maintenanceMessage || ''}
|
|
onChange={(e) => updateSetting('maintenanceMessage', e.target.value || null)}
|
|
rows={3}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
placeholder="We are currently performing maintenance. Please check back soon."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{locale === 'es' ? 'Mensaje de Mantenimiento (Español)' : 'Maintenance Message (Spanish)'}
|
|
</label>
|
|
<textarea
|
|
value={settings.maintenanceMessageEs || ''}
|
|
onChange={(e) => updateSetting('maintenanceMessageEs', e.target.value || null)}
|
|
rows={3}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
placeholder="Estamos realizando mantenimiento. Por favor vuelve pronto."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Save Button at Bottom */}
|
|
<div className="flex justify-end">
|
|
<Button onClick={handleSave} isLoading={saving} size="lg">
|
|
<CheckCircleIcon className="w-5 h-5 mr-2" />
|
|
{locale === 'es' ? 'Guardar Todos los Cambios' : 'Save All Changes'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Legal Settings Tab */}
|
|
{activeTab === 'legal' && (
|
|
<div className="space-y-6">
|
|
{/* Info Banner */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<p className="text-blue-800 text-sm">
|
|
<span className="font-medium">
|
|
{locale === 'es' ? 'Nota:' : 'Note:'}
|
|
</span>{' '}
|
|
{locale === 'es'
|
|
? 'Estos valores se usan como marcadores de posición en las páginas legales. Los marcadores como {{COMPANY_NAME}} se reemplazan automáticamente con los valores configurados aquí.'
|
|
: 'These values are used as placeholders in legal pages. Placeholders like {{COMPANY_NAME}} are automatically replaced with the values configured here.'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Company Information */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
|
|
<ScaleIcon className="w-5 h-5 text-indigo-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Información de la Empresa' : 'Company Information'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Datos legales de la empresa que aparecerán en las páginas legales'
|
|
: 'Legal company details that will appear in legal pages'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label={locale === 'es' ? 'Nombre de la Empresa' : 'Company Name'}
|
|
value={legalSettings.companyName || ''}
|
|
onChange={(e) => updateLegalSetting('companyName', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: Spanglish S.A.' : 'e.g. Spanglish S.A.'}
|
|
/>
|
|
<Input
|
|
label={locale === 'es' ? 'Nombre de la Entidad Legal' : 'Legal Entity Name'}
|
|
value={legalSettings.legalEntityName || ''}
|
|
onChange={(e) => updateLegalSetting('legalEntityName', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: Spanglish S.A.' : 'e.g. Spanglish S.A.'}
|
|
/>
|
|
<Input
|
|
label={locale === 'es' ? 'Número de RUC' : 'RUC Number'}
|
|
value={legalSettings.rucNumber || ''}
|
|
onChange={(e) => updateLegalSetting('rucNumber', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: 80012345-6' : 'e.g. 80012345-6'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Address & Location */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
|
|
<GlobeAltIcon className="w-5 h-5 text-teal-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Dirección y Ubicación' : 'Address & Location'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Dirección física y jurisdicción legal'
|
|
: 'Physical address and legal jurisdiction'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="max-w-lg">
|
|
<Input
|
|
label={locale === 'es' ? 'Dirección de la Empresa' : 'Company Address'}
|
|
value={legalSettings.companyAddress || ''}
|
|
onChange={(e) => updateLegalSetting('companyAddress', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: Av. Mariscal López 1234' : 'e.g. 1234 Main Street'}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label={locale === 'es' ? 'Ciudad' : 'City'}
|
|
value={legalSettings.companyCity || ''}
|
|
onChange={(e) => updateLegalSetting('companyCity', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: Asunción' : 'e.g. Asunción'}
|
|
/>
|
|
<Input
|
|
label={locale === 'es' ? 'País' : 'Country'}
|
|
value={legalSettings.companyCountry || ''}
|
|
onChange={(e) => updateLegalSetting('companyCountry', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: Paraguay' : 'e.g. Paraguay'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Contact Emails */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-rose-100 rounded-full flex items-center justify-center">
|
|
<EnvelopeIcon className="w-5 h-5 text-rose-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Emails Legales' : 'Legal Emails'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Direcciones de email para asuntos legales y soporte'
|
|
: 'Email addresses for legal matters and support'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label={locale === 'es' ? 'Email de Soporte' : 'Support Email'}
|
|
type="email"
|
|
value={legalSettings.supportEmail || ''}
|
|
onChange={(e) => updateLegalSetting('supportEmail', e.target.value || null)}
|
|
placeholder="support@example.com"
|
|
error={legalErrors.supportEmail}
|
|
/>
|
|
<Input
|
|
label={locale === 'es' ? 'Email Legal' : 'Legal Email'}
|
|
type="email"
|
|
value={legalSettings.legalEmail || ''}
|
|
onChange={(e) => updateLegalSetting('legalEmail', e.target.value || null)}
|
|
placeholder="legal@example.com"
|
|
error={legalErrors.legalEmail}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Legal Jurisdiction */}
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
|
|
<ScaleIcon className="w-5 h-5 text-amber-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">
|
|
{locale === 'es' ? 'Jurisdicción Legal' : 'Legal Jurisdiction'}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{locale === 'es'
|
|
? 'Ley aplicable y jurisdicción para las páginas legales'
|
|
: 'Governing law and jurisdiction for legal pages'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label={locale === 'es' ? 'Ley Aplicable' : 'Governing Law'}
|
|
value={legalSettings.governingLaw || ''}
|
|
onChange={(e) => updateLegalSetting('governingLaw', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: las leyes de la República del Paraguay' : 'e.g. the laws of the Republic of Paraguay'}
|
|
/>
|
|
<Input
|
|
label={locale === 'es' ? 'Ciudad de Jurisdicción' : 'Jurisdiction City'}
|
|
value={legalSettings.jurisdictionCity || ''}
|
|
onChange={(e) => updateLegalSetting('jurisdictionCity', e.target.value || null)}
|
|
placeholder={locale === 'es' ? 'Ej: Asunción' : 'e.g. Asunción'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Save Button at Bottom */}
|
|
<div className="flex justify-end">
|
|
<Button onClick={handleSaveLegal} isLoading={savingLegal} size="lg">
|
|
<CheckCircleIcon className="w-5 h-5 mr-2" />
|
|
{locale === 'es' ? 'Guardar Configuración Legal' : 'Save Legal Settings'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|