Fix: Language and currency selectors not working

2025-10-11 15:02:57 +00:00
parent f2105a81ee
commit 649a5bd289
6 changed files with 60 additions and 48 deletions
--- a/src/components/layouts/FrontendLayout.tsx
+++ b/src/components/layouts/FrontendLayout.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import FrontendStyles from './FrontendStyles';
+import CurrencySelector from '@/components/CurrencySelector';
+import LanguageSelector from '@/components/LanguageSelector';

 interface FrontendLayoutProps {
  children: React.ReactNode;
@@ -9,6 +11,10 @@ const FrontendLayout: React.FC<FrontendLayoutProps> = ({ children }) => {
  return (
    <>
      <FrontendStyles />
+      <div className="fixed top-3 right-3 z-[60] flex items-center gap-2">
+        <CurrencySelector />
+        <LanguageSelector />
+      </div>
      {children}
    </>
  );
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -5,9 +5,11 @@ import PlacesSection from "@/components/PlacesSection";
 import BlogSection from "@/components/BlogSection";
 import Footer from "@/components/Footer";
 import { AIFloatingAssistant } from "@/components/AIFloatingAssistant";
+import { useLanguage } from "@/contexts/LanguageContext";

 const Index = () => {
  const navigate = useNavigate();
+  const { t } = useLanguage();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedLocation, setSelectedLocation] = useState("");

@@ -23,12 +25,12 @@ const Index = () => {
  };

  const categories = [
-    { icon: "🏢", title: "Apartment", count: "99+" },
-    { icon: "🍽️", title: "Restaurant", count: "55+" },
-    { icon: "🎭", title: "Events/Arts", count: "55+" },
-    { icon: "🛍️", title: "Shops", count: "80+" },
-    { icon: "🏛️", title: "Museum", count: "96+" },
-    { icon: "💪", title: "Gymnasiums", count: "21+" }
+    { icon: "🏢", title: t('apartments'), count: "99+" },
+    { icon: "🍽️", title: t('restaurants'), count: "55+" },
+    { icon: "🎭", title: t('events'), count: "55+" },
+    { icon: "🛍️", title: t('shops'), count: "80+" },
+    { icon: "🏛️", title: t('museums'), count: "96+" },
+    { icon: "💪", title: t('gyms'), count: "21+" }
  ];

  return (
@@ -66,9 +68,9 @@ const Index = () => {
            </a>
            
            <div className="hidden lg:flex items-center space-x-8">
-              <a className="text-white hover:text-orange-400 transition-colors" href="/">Home</a>
-              <a className="text-white hover:text-orange-400 transition-colors" href="/explore">Explore</a>
-              <a className="text-white hover:text-orange-400 transition-colors" href="/about">About</a>
+              <a className="text-white hover:text-orange-400 transition-colors" href="/">{t('home')}</a>
+              <a className="text-white hover:text-orange-400 transition-colors" href="/explore">{t('explore')}</a>
+              <a className="text-white hover:text-orange-400 transition-colors" href="/about">{t('about')}</a>
            </div>
            
            <div className="flex items-center space-x-4">
@@ -83,7 +85,7 @@ const Index = () => {
                className="hidden sm:flex items-center space-x-2 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full transition-colors"
              >
                <span>➕</span>
-                <span>Add Listing</span>
+                <span>{t('addListing')}</span>
              </a>
            </div>
          </div>
@@ -99,15 +101,13 @@ const Index = () => {
        <div className="absolute inset-0 bg-black bg-opacity-50" />
        <div className="container mx-auto px-4 relative z-10 py-20">
          <div className="text-center text-white uppercase mb-3 text-sm font-medium">
-            WE ARE #1 ON THE MARKET
+            {t('heroBadge')}
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-white text-center mb-5">
-            We're Here to Help You
-            <br className="hidden lg:block" /> 
-            <span className="font-caveat text-span">Navigate</span> While Traveling
+            {t('heroTitle')}
          </h1>
          <div className="text-lg mb-8 text-center text-white max-w-2xl mx-auto">
-            You'll get comprehensive results based on the provided location.
+            {t('heroSubtitle')}
          </div>

          {/* Search Form */}
@@ -119,7 +119,7 @@ const Index = () => {
                  <input 
                    type="text" 
                    className="bg-transparent text-white placeholder-white border-none outline-none flex-1" 
-                    placeholder="What are you looking for?" 
+                    placeholder={t('searchPlaceholder')} 
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
@@ -133,7 +133,7 @@ const Index = () => {
                    value={selectedLocation}
                    onChange={(e) => setSelectedLocation(e.target.value)}
                  >
-                    <option value="" className="text-gray-800">Location</option>
+                    <option value="" className="text-gray-800">{t('locationPlaceholder')}</option>
                    <option value="florence" className="text-gray-800">Florence, Italy</option>
                    <option value="rome" className="text-gray-800">Rome, Italy</option>
                    <option value="milan" className="text-gray-800">Milan, Italy</option>
@@ -145,7 +145,7 @@ const Index = () => {
                  className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full transition-colors"
                  onClick={handleSearch}
                >
-                  Search places
+                  {t('searchButton')}
                </button>
              </div>
            </div>
@@ -172,7 +172,7 @@ const Index = () => {
                            {category.title}
                          </button>
                        </h3>
-                        <p className="text-sm text-gray-300">{category.count} listings</p>
+                        <p className="text-sm text-gray-300">{category.count} {t('listings')}</p>
                      </div>
                    </div>
                  </div>
@@ -189,13 +189,11 @@ const Index = () => {
          <div className="flex justify-center">
            <div className="max-w-4xl text-center">
              <div className="mb-12">
-                <div className="font-caveat text-4xl font-medium text-orange-500 mb-4">Best Way</div>
                <h2 className="text-4xl md:text-5xl font-semibold mb-6">
-                  Find Your Dream Place The Best Way
+                  {t('processTitle')}
                </h2>
                <div className="text-lg text-gray-600">
-                  Discover exciting categories. 
-                  <span className="text-orange-500 font-semibold"> Find what you're looking for.</span>
+                  {t('processSubtitle')}
                </div>
              </div>
            </div>
@@ -207,7 +205,7 @@ const Index = () => {
                1
              </div>
              <h4 className="text-xl font-semibold mb-4">
-                Input your location to start looking for landmarks.
+                {t('step1')}
              </h4>
              <p className="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer semper.
@@ -219,7 +217,7 @@ const Index = () => {
                2
              </div>
              <h4 className="text-xl font-semibold mb-4">
-                Make an appointment at the place you want to visit.
+                {t('step2')}
              </h4>
              <p className="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer.
@@ -231,7 +229,7 @@ const Index = () => {
                3
              </div>
              <h4 className="text-xl font-semibold mb-4">
-                Visit the place and enjoy the experience.
+                {t('step3')}
              </h4>
              <p className="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer aenean.
--- a/src/pages/dashboard/commerce/Cashier.tsx
+++ b/src/pages/dashboard/commerce/Cashier.tsx
@@ -7,9 +7,11 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { useCurrency } from '@/contexts/CurrencyContext';

 const Cashier = () => {
  const { t } = useLanguage();
+  const { formatAmount } = useCurrency();
  const { toast } = useToast();
  const [cashierData] = useState({
    openingBalance: 1000.00,
@@ -50,55 +52,55 @@ const Cashier = () => {
          <div className="flex items-center gap-3">
            <Receipt className="w-8 h-8 text-orange-600" />
            <div>
-              <h1 className="text-3xl font-bold text-gray-900">Control de Caja</h1>
-              <p className="text-gray-600">Gestiona el flujo de efectivo de tu tienda</p>
+              <h1 className="text-3xl font-bold text-gray-900">{t('cashierControl')}</h1>
+              <p className="text-gray-600">{t('cashierControl')}</p>
            </div>
          </div>
          <div className="flex gap-2">
-            <Button onClick={handleOpenCashier}>Abrir Caja</Button>
-            <Button variant="outline" onClick={handleCloseCashier}>Cerrar Caja</Button>
+            <Button onClick={handleOpenCashier}>{t('openCashier')}</Button>
+            <Button variant="outline" onClick={handleCloseCashier}>{t('closeCashier')}</Button>
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-4 mb-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Saldo Inicial</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('openingBalance')}</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
-              <div className="text-2xl font-bold">${cashierData.openingBalance.toFixed(2)}</div>
+              <div className="text-2xl font-bold">{formatAmount(cashierData.openingBalance)}</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Saldo Actual</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('currentBalance')}</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
-              <div className="text-2xl font-bold text-green-600">${cashierData.currentBalance.toFixed(2)}</div>
+              <div className="text-2xl font-bold text-green-600">{formatAmount(cashierData.currentBalance)}</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Ventas del Día</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('dailySales')}</CardTitle>
              <TrendingUp className="h-4 w-4 text-green-600" />
            </CardHeader>
            <CardContent>
-              <div className="text-2xl font-bold">${cashierData.totalSales.toFixed(2)}</div>
+              <div className="text-2xl font-bold">{formatAmount(cashierData.totalSales)}</div>
              <p className="text-xs text-muted-foreground">{cashierData.transactionsCount} transacciones</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Gastos</CardTitle>
+              <CardTitle className="text-sm font-medium">{t('expenses')}</CardTitle>
              <TrendingDown className="h-4 w-4 text-red-600" />
            </CardHeader>
            <CardContent>
-              <div className="text-2xl font-bold text-red-600">${cashierData.totalExpenses.toFixed(2)}</div>
+              <div className="text-2xl font-bold text-red-600">{formatAmount(cashierData.totalExpenses)}</div>
            </CardContent>
          </Card>
        </div>
--- a/src/pages/dashboard/commerce/Customers.tsx
+++ b/src/pages/dashboard/commerce/Customers.tsx
@@ -127,7 +127,7 @@ const Customers = () => {
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <div>
                    <CardTitle className="text-base">{customer.firstName} {customer.lastName}</CardTitle>
-                    <p className="text-sm text-muted-foreground">Cliente desde {customer.createdAt}</p>
+                    <p className="text-sm text-muted-foreground">{t('customerSince')} {customer.createdAt}</p>
                  </div>
                  <div className="flex gap-1">
                    <Button variant="outline" size="sm">
@@ -155,7 +155,7 @@ const Customers = () => {
                      </div>
                    )}
                    <div className="flex justify-between items-center pt-2 border-t">
-                      <span className="text-muted-foreground">Total compras:</span>
+                      <span className="text-muted-foreground">{t('totalPurchases')}:</span>
                      <div className="flex items-center gap-1 font-bold">
                        <DollarSign className="w-4 h-4" />
                        {customer.totalPurchases || 0}
--- a/src/pages/dashboard/commerce/Inventory.tsx
+++ b/src/pages/dashboard/commerce/Inventory.tsx
@@ -25,7 +25,7 @@ const Inventory = () => {

  const handleSubmit = async () => {
    try {
-      toast({ title: 'Éxito', description: 'Producto agregado al inventario' });
+      toast({ title: t('success'), description: t('add') });
      setFormData({
        name: '',
        category: '',
@@ -35,7 +35,7 @@ const Inventory = () => {
        supplier: ''
      });
    } catch (error: any) {
-      toast({ title: 'Error', description: error?.message || 'No se pudo agregar el producto', variant: 'destructive' });
+      toast({ title: t('error'), description: error?.message || t('error'), variant: 'destructive' });
    }
  };

--- a/src/pages/dashboard/commerce/POSTerminal.tsx
+++ b/src/pages/dashboard/commerce/POSTerminal.tsx
@@ -7,9 +7,11 @@ import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { apiClient } from '@/services/adminApi';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { useCurrency } from '@/contexts/CurrencyContext';

 const POSTerminal = () => {
  const { t } = useLanguage();
+  const { formatAmount } = useCurrency();
  const [products, setProducts] = useState<any[]>([]);
  const [cart, setCart] = useState<any[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
@@ -23,7 +25,11 @@ const POSTerminal = () => {
    try {
      // Load inventory products for POS
      // For now using mock data
-      setProducts([]);
+      const mock = [
+        { id: 1, name: 'T-Shirt', category: 'Apparel', price: 20, stock: 15, barcode: '123456' },
+        { id: 2, name: 'Mug', category: 'Gifts', price: 8.5, stock: 40, barcode: '789012' },
+      ].map(p => ({ ...p, formattedPrice: formatAmount(p.price) }));
+      setProducts(mock);
    } catch (error) {
      console.error('Error loading products:', error);
    }
@@ -122,7 +128,7 @@ const POSTerminal = () => {
                      )}
                        <div className="flex justify-between items-center">
                          <Badge variant="outline">{item.category}</Badge>
-                        <span className="text-lg font-bold">${item.price}</span>
+                          <span className="text-lg font-bold">{item.formattedPrice || `$${item.price}`}</span>
                        </div>
                      <p className="text-xs text-muted-foreground">{t('stock')}: {item.stock}</p>
                    </div>
@@ -150,7 +156,7 @@ const POSTerminal = () => {
                          <div key={item.id} className="flex items-center justify-between border-b pb-2">
                            <div className="flex-1">
                              <p className="font-medium text-sm">{item.name}</p>
-                              <p className="text-xs text-muted-foreground">${item.price}</p>
+                              <p className="text-xs text-muted-foreground">{item.formattedPrice || `$${item.price}`}</p>
                            </div>
                            <div className="flex items-center gap-2">
                              <Button size="sm" variant="outline" onClick={() => updateQuantity(item.id, -1)}>