Fix some issues
This commit is contained in:
Urtzi Alfaro
@@ -184,9 +184,10 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
const topBenefits = getTopBenefits(tierKey, plan);
|
||||
|
||||
const CardWrapper = mode === 'landing' ? Link : 'div';
|
||||
const isCurrentPlan = mode === 'settings' && selectedPlan === tier;
|
||||
const cardProps = mode === 'landing'
|
||||
? { to: getRegisterUrl(tier) }
|
||||
: mode === 'selection' || mode === 'settings'
|
||||
: mode === 'selection' || (mode === 'settings' && !isCurrentPlan)
|
||||
? { onClick: () => handlePlanAction(tier, plan) }
|
||||
: {};
|
||||
|
||||
@@ -198,8 +199,10 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{...cardProps}
|
||||
className={`
|
||||
relative rounded-2xl p-8 transition-all duration-300 block no-underline
|
||||
${mode === 'settings' || mode === 'selection' || mode === 'landing' ? 'cursor-pointer' : ''}
|
||||
${isSelected
|
||||
${(mode === 'settings' && !isCurrentPlan) || mode === 'selection' || mode === 'landing' ? 'cursor-pointer' : ''}
|
||||
${isCurrentPlan
|
||||
? 'bg-[var(--bg-secondary)] border-2 border-[var(--color-primary)] opacity-70 cursor-not-allowed'
|
||||
: isSelected
|
||||
? 'bg-gradient-to-br from-green-600 to-emerald-700 shadow-2xl ring-4 ring-green-400/60 scale-105 z-20 transform animate-[pulse_2s_ease-in-out_infinite]'
|
||||
: isPopular
|
||||
? 'bg-gradient-to-br from-blue-600 to-blue-800 shadow-xl ring-2 ring-blue-400 lg:scale-105 lg:z-10 hover:ring-4 hover:ring-blue-300 hover:shadow-2xl'
|
||||
@@ -207,8 +210,18 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Current Plan Badge */}
|
||||
{isCurrentPlan && (
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
|
||||
<div className="bg-[var(--color-primary)] text-white px-6 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-1.5 border-2 border-[var(--color-primary)]">
|
||||
<Check className="w-4 h-4 stroke-[3]" />
|
||||
{t('ui.current_plan', 'Plan Actual')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Selected Badge */}
|
||||
{isSelected && (
|
||||
{isSelected && !isCurrentPlan && (
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
|
||||
<div className="bg-white text-green-700 px-6 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-1.5 border-2 border-green-400">
|
||||
<Check className="w-4 h-4 stroke-[3]" />
|
||||
@@ -218,7 +231,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
)}
|
||||
|
||||
{/* Popular Badge */}
|
||||
{isPopular && !isSelected && (
|
||||
{isPopular && !isSelected && !isCurrentPlan && (
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||||
<div className="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
|
||||
<Star className="w-4 h-4 fill-current" />
|
||||
@@ -229,10 +242,10 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
|
||||
{/* Plan Header */}
|
||||
<div className="mb-6">
|
||||
<h3 className={`text-2xl font-bold mb-2 ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<h3 className={`text-2xl font-bold mb-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{t(`plans.${tier}.name`, plan.name)}
|
||||
</h3>
|
||||
<p className={`text-sm ${(isPopular || isSelected) ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-sm ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
{plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}
|
||||
</p>
|
||||
</div>
|
||||
@@ -240,17 +253,17 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-baseline">
|
||||
<span className={`text-4xl font-bold ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<span className={`text-4xl font-bold ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{subscriptionService.formatPrice(price)}
|
||||
</span>
|
||||
<span className={`ml-2 text-lg ${(isPopular || isSelected) ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
|
||||
<span className={`ml-2 text-lg ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
|
||||
/{billingCycle === 'monthly' ? t('ui.per_month') : t('ui.per_year')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Trial Badge - Always Visible */}
|
||||
<div className={`mt-3 px-3 py-1.5 text-sm font-medium rounded-full inline-block ${
|
||||
(isPopular || isSelected) ? 'bg-white/20 text-white' : 'bg-green-500/10 text-green-600 dark:text-green-400'
|
||||
(isPopular || isSelected) && !isCurrentPlan ? 'bg-white/20 text-white' : 'bg-green-500/10 text-green-600 dark:text-green-400'
|
||||
}`}>
|
||||
{savings
|
||||
? t('ui.save_amount', { amount: subscriptionService.formatPrice(savings.savingsAmount) })
|
||||
@@ -264,9 +277,9 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{/* Perfect For */}
|
||||
{plan.recommended_for_key && (
|
||||
<div className={`mb-6 text-center px-4 py-2 rounded-lg ${
|
||||
(isPopular || isSelected) ? 'bg-white/10' : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
|
||||
(isPopular || isSelected) && !isCurrentPlan ? 'bg-white/10' : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
|
||||
}`}>
|
||||
<p className={`text-sm font-medium ${(isPopular || isSelected) ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-sm font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
{t(plan.recommended_for_key)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -275,12 +288,12 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{/* Feature Inheritance Indicator */}
|
||||
{tier === SUBSCRIPTION_TIERS.PROFESSIONAL && (
|
||||
<div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
|
||||
(isPopular || isSelected)
|
||||
(isPopular || isSelected) && !isCurrentPlan
|
||||
? 'bg-gradient-to-r from-white/20 to-white/10 border-2 border-white/40 shadow-lg'
|
||||
: 'bg-gradient-to-r from-blue-500/10 to-blue-600/5 border-2 border-blue-400/30 dark:from-blue-400/10 dark:to-blue-500/5 dark:border-blue-400/30'
|
||||
}`}>
|
||||
<p className={`text-xs font-bold uppercase tracking-wide text-center ${
|
||||
(isPopular || isSelected) ? 'text-white drop-shadow-sm' : 'text-blue-600 dark:text-blue-300'
|
||||
(isPopular || isSelected) && !isCurrentPlan ? 'text-white drop-shadow-sm' : 'text-blue-600 dark:text-blue-300'
|
||||
}`}>
|
||||
✓ {t('ui.feature_inheritance_professional')}
|
||||
</p>
|
||||
@@ -288,12 +301,12 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
)}
|
||||
{tier === SUBSCRIPTION_TIERS.ENTERPRISE && (
|
||||
<div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
|
||||
(isPopular || isSelected)
|
||||
(isPopular || isSelected) && !isCurrentPlan
|
||||
? 'bg-gradient-to-r from-white/20 to-white/10 border-2 border-white/40 shadow-lg'
|
||||
: 'bg-gradient-to-r from-gray-700/20 to-gray-800/10 border-2 border-gray-600/40 dark:from-gray-600/20 dark:to-gray-700/10 dark:border-gray-500/40'
|
||||
}`}>
|
||||
<p className={`text-xs font-bold uppercase tracking-wide text-center ${
|
||||
(isPopular || isSelected) ? 'text-white drop-shadow-sm' : 'text-gray-700 dark:text-gray-300'
|
||||
(isPopular || isSelected) && !isCurrentPlan ? 'text-white drop-shadow-sm' : 'text-gray-700 dark:text-gray-300'
|
||||
}`}>
|
||||
✓ {t('ui.feature_inheritance_enterprise')}
|
||||
</p>
|
||||
@@ -307,34 +320,34 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
<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 ${
|
||||
(isPopular || isSelected) ? 'bg-white' : 'bg-green-500'
|
||||
(isPopular || isSelected) && !isCurrentPlan ? 'bg-white' : 'bg-green-500'
|
||||
}`}>
|
||||
<Check className={`w-3 h-3 ${(isPopular || isSelected) ? 'text-blue-600' : 'text-white'}`} />
|
||||
<Check className={`w-3 h-3 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-blue-600' : 'text-white'}`} />
|
||||
</div>
|
||||
</div>
|
||||
<span className={`ml-3 text-sm font-medium ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<span className={`ml-3 text-sm font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{formatFeatureName(feature)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Key Limits (Users, Locations, Products) */}
|
||||
<div className={`pt-4 mt-4 border-t space-y-2 ${(isPopular || isSelected) ? 'border-white/20' : 'border-[var(--border-primary)]'}`}>
|
||||
<div className={`pt-4 mt-4 border-t space-y-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'border-white/20' : 'border-[var(--border-primary)]'}`}>
|
||||
<div className="flex items-center text-sm">
|
||||
<Users className={`w-4 h-4 mr-2 ${(isPopular || isSelected) ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<Users className={`w-4 h-4 mr-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{formatLimit(plan.limits.users, 'limits.users_unlimited')} {t('limits.users_label', 'usuarios')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<MapPin className={`w-4 h-4 mr-2 ${(isPopular || isSelected) ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<MapPin className={`w-4 h-4 mr-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{formatLimit(plan.limits.locations, 'limits.locations_unlimited')} {t('limits.locations_label', 'ubicaciones')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<Package className={`w-4 h-4 mr-2 ${(isPopular || isSelected) ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<Package className={`w-4 h-4 mr-2 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{formatLimit(plan.limits.products, 'limits.products_unlimited')} {t('limits.products_label', 'productos')}
|
||||
</span>
|
||||
</div>
|
||||
@@ -343,33 +356,45 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
|
||||
{/* CTA Button */}
|
||||
<Button
|
||||
disabled={isCurrentPlan}
|
||||
className={`w-full py-4 text-base font-semibold transition-all ${
|
||||
isSelected
|
||||
isCurrentPlan
|
||||
? 'bg-gray-400 text-gray-700 cursor-not-allowed opacity-60'
|
||||
: isSelected
|
||||
? 'bg-white text-green-700 hover:bg-gray-50 shadow-lg border-2 border-white/50'
|
||||
: isPopular
|
||||
? 'bg-white text-blue-600 hover:bg-gray-100'
|
||||
: 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-dark)]'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (mode === 'settings' || mode === 'selection') {
|
||||
if ((mode === 'settings' || mode === 'selection') && !isCurrentPlan) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handlePlanAction(tier, plan);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{mode === 'selection' && isSelected
|
||||
{isCurrentPlan
|
||||
? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Check className="w-5 h-5" />
|
||||
{t('ui.current_plan', 'Plan Actual')}
|
||||
</span>
|
||||
)
|
||||
: mode === 'selection' && isSelected
|
||||
? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Check className="w-5 h-5" />
|
||||
{t('ui.plan_selected', 'Plan Seleccionado')}
|
||||
</span>
|
||||
)
|
||||
: mode === 'settings'
|
||||
? t('ui.change_subscription', 'Cambiar Suscripción')
|
||||
: t('ui.start_free_trial')}
|
||||
</Button>
|
||||
|
||||
{/* Footer */}
|
||||
<p className={`text-xs text-center mt-3 ${(isPopular || isSelected) ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-xs text-center mt-3 ${(isPopular || isSelected) && !isCurrentPlan ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
|
||||
{showPilotBanner
|
||||
? t('ui.free_trial_footer', { months: pilotTrialMonths })
|
||||
: t('ui.free_trial_footer', { months: 0 })
|
||||
|
||||
Reference in New Issue
Block a user