Improve the UI and training
This commit is contained in:
Urtzi Alfaro
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Check, Star, ArrowRight, Package, TrendingUp, Settings, Loader, Users, MapPin, CheckCircle, Zap } from 'lucide-react';
|
||||
import { Check, Star, ArrowRight, Package, TrendingUp, Settings, Loader, Users, MapPin, CheckCircle, Zap, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { Button, Card, Badge } from '../ui';
|
||||
import {
|
||||
subscriptionService,
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
SUBSCRIPTION_TIERS
|
||||
} from '../../api';
|
||||
import { getRegisterUrl } from '../../utils/navigation';
|
||||
import { ValuePropositionBadge } from './ValuePropositionBadge';
|
||||
import { PricingFeatureCategory } from './PricingFeatureCategory';
|
||||
|
||||
type BillingCycle = 'monthly' | 'yearly';
|
||||
type DisplayMode = 'landing' | 'selection';
|
||||
@@ -33,11 +35,12 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
pilotTrialMonths = 3,
|
||||
className = ''
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation('subscription');
|
||||
const [plans, setPlans] = useState<Record<SubscriptionTier, PlanMetadata> | null>(null);
|
||||
const [billingCycle, setBillingCycle] = useState<BillingCycle>('monthly');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [expandedPlan, setExpandedPlan] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadPlans();
|
||||
@@ -243,7 +246,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
${isSelected
|
||||
? 'border-2 border-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/10 via-[var(--color-primary)]/5 to-transparent shadow-2xl ring-4 ring-[var(--color-primary)]/30 scale-[1.02]'
|
||||
: isPopular
|
||||
? 'bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary)] to-[var(--color-primary-dark)] shadow-2xl transform scale-105 z-10'
|
||||
? 'bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900 shadow-2xl transform scale-105 z-10 ring-4 ring-[var(--color-primary)]/20'
|
||||
: 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 hover:shadow-xl hover:-translate-y-1'
|
||||
}
|
||||
`}
|
||||
@@ -276,18 +279,18 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
<h3 className={`text-2xl font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.name}
|
||||
</h3>
|
||||
<p className={`mt-3 leading-relaxed ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
{plan.tagline}
|
||||
<p className={`mt-3 text-sm leading-relaxed ${isPopular ? 'text-white' : 'text-[var(--text-secondary)]'}`}>
|
||||
{plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-baseline">
|
||||
<span className={`text-5xl font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{subscriptionService.formatPrice(price)}
|
||||
</span>
|
||||
<span className={`ml-2 text-lg ${isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
|
||||
<span className={`ml-2 text-lg ${isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}`}>
|
||||
/{billingCycle === 'monthly' ? 'mes' : 'año'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -302,50 +305,99 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
)}
|
||||
|
||||
{/* Trial Badge */}
|
||||
{!savings && (
|
||||
{!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)]'
|
||||
}`}>
|
||||
3 meses gratis
|
||||
{pilotTrialMonths} meses gratis
|
||||
</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
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ROI Badge */}
|
||||
{plan.roi_badge && !isPopular && (
|
||||
<div className="mb-4">
|
||||
<ValuePropositionBadge roiBadge={plan.roi_badge} />
|
||||
</div>
|
||||
)}
|
||||
{plan.roi_badge && isPopular && (
|
||||
<div className="mb-4 bg-white/20 border border-white/30 rounded-lg px-4 py-3">
|
||||
<p className="text-sm font-semibold text-white leading-tight flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{plan.roi_badge.translation_key ? t(plan.roi_badge.translation_key) : (plan.roi_badge.text_es || plan.roi_badge.text || '')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Good For / Recommended For */}
|
||||
{plan.recommended_for_key && (
|
||||
<div className={`mb-6 text-center px-4 py-2 rounded-lg ${
|
||||
isPopular
|
||||
? 'bg-white/10 border border-white/20'
|
||||
: 'bg-[var(--bg-secondary)] border border-[var(--border-primary)]'
|
||||
}`}>
|
||||
<p className={`text-xs font-medium ${isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}`}>
|
||||
{t(plan.recommended_for_key)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key Limits */}
|
||||
<div className={`mb-6 p-4 rounded-lg ${
|
||||
isPopular ? 'bg-white/10' : isSelected ? 'bg-[var(--color-primary)]/5' : 'bg-[var(--bg-primary)]'
|
||||
<div className={`mb-6 p-3 rounded-lg ${
|
||||
isPopular ? 'bg-white/15 border border-white/20' : isSelected ? 'bg-[var(--color-primary)]/5' : 'bg-[var(--bg-primary)]'
|
||||
}`}>
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Usuarios:</span>
|
||||
<span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.users || 'Ilimitado'}
|
||||
<div className="space-y-2">
|
||||
<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
|
||||
</span>
|
||||
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.users || '∞'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Ubicaciones:</span>
|
||||
<span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.locations || 'Ilimitado'}
|
||||
<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
|
||||
</span>
|
||||
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.locations || '∞'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Productos:</span>
|
||||
<span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.products || 'Ilimitado'}
|
||||
<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
|
||||
</span>
|
||||
<span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.products || '∞'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Pronósticos/día:</span>
|
||||
<span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.limits.forecasts_per_day || 'Ilimitado'}
|
||||
<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
|
||||
</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` : '∞'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features List */}
|
||||
<div className={`space-y-3 mb-8 max-h-80 overflow-y-auto pr-2 scrollbar-thin`}>
|
||||
{plan.features.slice(0, 8).map((feature) => (
|
||||
{/* Hero Features List */}
|
||||
<div className={`space-y-3 mb-6`}>
|
||||
{(plan.hero_features || plan.features.slice(0, 4)).map((feature) => (
|
||||
<div key={feature} className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${
|
||||
@@ -361,18 +413,63 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{plan.features.length > 8 && (
|
||||
<p className={`text-sm italic ${isPopular ? 'text-white/70' : 'text-[var(--text-secondary)]'}`}>
|
||||
Y {plan.features.length - 8} características más...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expandable Features - Show All Button */}
|
||||
{plan.features.length > 4 && (
|
||||
<div className="mb-8">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setExpandedPlan(expandedPlan === tier ? null : tier);
|
||||
}}
|
||||
className={`w-full py-2 px-4 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
|
||||
isPopular
|
||||
? 'bg-white/10 hover:bg-white/20 text-white border border-white/20'
|
||||
: 'bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] border border-[var(--border-primary)]'
|
||||
}`}
|
||||
>
|
||||
{expandedPlan === tier ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
Mostrar menos características
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
Ver todas las {plan.features.length} características
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Expanded Features List */}
|
||||
{expandedPlan === tier && (
|
||||
<div className={`mt-4 p-4 rounded-lg max-h-96 overflow-y-auto ${
|
||||
isPopular
|
||||
? 'bg-white/10 border border-white/20'
|
||||
: 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
|
||||
}`}>
|
||||
<div className="space-y-2">
|
||||
{plan.features.map((feature) => (
|
||||
<div key={feature} className="flex items-start py-1">
|
||||
<Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isPopular ? 'text-white' : 'text-[var(--color-success)]'}`} />
|
||||
<span className={`ml-2 text-xs ${isPopular ? 'text-white/95' : 'text-[var(--text-primary)]'}`}>
|
||||
{formatFeatureName(feature)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Support */}
|
||||
<div className={`mb-6 text-sm text-center border-t pt-4 ${
|
||||
isPopular ? 'text-white/80 border-white/20' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'
|
||||
isPopular ? 'text-white/95 border-white/30' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'
|
||||
}`}>
|
||||
{plan.support}
|
||||
{plan.support_key ? t(plan.support_key) : plan.support || ''}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
@@ -418,7 +515,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/70' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
3 meses gratis • Tarjeta requerida para validación
|
||||
</p>
|
||||
</CardWrapper>
|
||||
|
||||
Reference in New Issue
Block a user