bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve frontend traslations

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-11-18 22:17:56 +01:00
parent 8c6393ea14
commit bbf6658759
27 changed files with 424 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/subscription/PricingComparisonTable.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
interface FeatureComparison {
key: string;
@@ -33,7 +34,8 @@ export const PricingComparisonTable: React.FC<PricingComparisonTableProps> = ({
categories,
className = '',
}) => {
const currentLang = localStorage.getItem('language') || 'es';
const { i18n } = useTranslation();
const currentLang = i18n.language;
// Group features by category
const featuresByCategory = features.reduce((acc, feature) => {

2
frontend/src/components/subscription/PricingSection.tsx
View File

@@ -20,7 +20,7 @@ export const PricingSection: React.FC = () => {
<div className="text-center mt-12">
<Link
to="/plans/compare"
className="text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] font-semibold inline-flex items-center gap-2"
className="text-[var(--color-primary)] hover:text-white font-semibold inline-flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 hover:bg-[var(--color-primary)] no-underline"
>
{t('landing:pricing.compare_link', 'Ver comparación completa de características')}
<ArrowRight className="w-4 h-4" />

32
frontend/src/components/subscription/SubscriptionPricingCards.tsx
View File

@@ -201,22 +201,22 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
className={`px-6 py-2 rounded-md text-sm font-semibold transition-all ${
billingCycle === 'monthly'
? 'bg-[var(--color-primary)] text-white shadow-md'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
: 'text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] hover:text-[var(--text-primary)]'
}`}
>
Mensual
{t('billing.monthly', 'Mensual')}
</button>
<button
onClick={() => setBillingCycle('yearly')}
className={`px-6 py-2 rounded-md text-sm font-semibold transition-all flex items-center gap-2 ${
billingCycle === 'yearly'
? 'bg-[var(--color-primary)] text-white shadow-md'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
: 'text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] hover:text-[var(--text-primary)]'
}`}
>
Anual
{t('billing.yearly', 'Anual')}
<span className="text-xs font-bold text-green-600 dark:text-green-400">
Ahorra 17%
{t('billing.save_percent', 'Ahorra 17%')}
</span>
</button>
</div>
@@ -309,14 +309,14 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
<div className={`mt-2 px-3 py-1 text-sm font-medium rounded-full inline-block ${
isPopular ? 'bg-white/20 text-white' : 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
}`}>
{pilotTrialMonths} meses gratis
{t('billing.free_months', { count: pilotTrialMonths })}
</div>
)}
{!savings && !showPilotBanner && (
<div className={`mt-2 px-3 py-1 text-sm font-medium rounded-full inline-block ${
isPopular ? 'bg-white/20 text-white' : 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
}`}>
{plan.trial_days} días gratis
{t('billing.free_trial_days', { count: plan.trial_days })}
</div>
)}
</div>
@@ -359,37 +359,37 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
<div className="flex items-center justify-between text-xs">
<span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
<Users className="w-3 h-3 inline mr-1" />
Usuarios
{t('limits.users', 'Usuarios')}
</span>
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
{plan.limits.users || '∞'}
{plan.limits.users || t('limits.unlimited', 'Ilimitado')}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
<MapPin className="w-3 h-3 inline mr-1" />
Ubicaciones
{t('limits.locations', 'Ubicaciones')}
</span>
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
{plan.limits.locations || '∞'}
{plan.limits.locations || t('limits.unlimited', 'Ilimitado')}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
<Package className="w-3 h-3 inline mr-1" />
Productos
{t('limits.products', 'Productos')}
</span>
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
{plan.limits.products || '∞'}
{plan.limits.products || t('limits.unlimited', 'Ilimitado')}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
<TrendingUp className="w-3 h-3 inline mr-1" />
Pronóstico
{t('limits.forecast', 'Pronóstico')}
</span>
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
{plan.limits.forecast_horizon_days ? `${plan.limits.forecast_horizon_days}d` : '∞'}
{plan.limits.forecast_horizon_days ? `${plan.limits.forecast_horizon_days}d` : t('limits.unlimited', 'Ilimitado')}
</span>
</div>
</div>
@@ -515,7 +515,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
)}
<p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
3 meses gratis • Tarjeta requerida para validación
{t('billing.free_months', { count: 3 })} • {t('billing.card_required')}
</p>
</CardWrapper>
);