Fix Demo enterprise
This commit is contained in:
Urtzi Alfaro
@@ -27,6 +27,8 @@ interface ProductionStatusBlockProps {
|
||||
runningBatches?: any[];
|
||||
pendingBatches?: any[];
|
||||
alerts?: any[]; // Add alerts prop for production-related alerts
|
||||
equipmentAlerts?: any[]; // Equipment-specific alerts
|
||||
productionAlerts?: any[]; // Production alerts (non-equipment)
|
||||
onStartBatch?: (batchId: string) => Promise<void>;
|
||||
onViewBatch?: (batchId: string) => void;
|
||||
loading?: boolean;
|
||||
@@ -37,6 +39,8 @@ export function ProductionStatusBlock({
|
||||
runningBatches = [],
|
||||
pendingBatches = [],
|
||||
alerts = [],
|
||||
equipmentAlerts = [],
|
||||
productionAlerts = [],
|
||||
onStartBatch,
|
||||
onViewBatch,
|
||||
loading,
|
||||
@@ -46,13 +50,35 @@ export function ProductionStatusBlock({
|
||||
const [processingId, setProcessingId] = useState<string | null>(null);
|
||||
|
||||
// Filter production-related alerts and deduplicate by ID
|
||||
const productionAlerts = React.useMemo(() => {
|
||||
// Also filter out alerts for batches already shown in late/running/pending sections
|
||||
const filteredProductionAlerts = React.useMemo(() => {
|
||||
const filtered = alerts.filter((alert: any) => {
|
||||
const eventType = alert.event_type || '';
|
||||
return eventType.includes('production.') ||
|
||||
eventType.includes('equipment_maintenance') ||
|
||||
eventType.includes('production_delay') ||
|
||||
eventType.includes('batch_start_delayed');
|
||||
|
||||
// First filter by event type
|
||||
const isProductionAlert = eventType.includes('production.') ||
|
||||
eventType.includes('equipment_maintenance') ||
|
||||
eventType.includes('production_delay') ||
|
||||
eventType.includes('batch_start_delayed');
|
||||
|
||||
if (!isProductionAlert) return false;
|
||||
|
||||
// Get batch ID from alert
|
||||
const batchId = alert.event_metadata?.batch_id || alert.entity_links?.production_batch;
|
||||
|
||||
// Filter out alerts for batches already shown in UI sections
|
||||
if (batchId) {
|
||||
const isLateBatch = lateToStartBatches.some(batch => batch.id === batchId);
|
||||
const isRunningBatch = runningBatches.some(batch => batch.id === batchId);
|
||||
const isPendingBatch = pendingBatches.some(batch => batch.id === batchId);
|
||||
|
||||
// If this alert is about a batch already shown, filter it out to prevent duplication
|
||||
if (isLateBatch || isRunningBatch || isPendingBatch) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
// Deduplicate by alert ID to prevent duplicates from API + SSE
|
||||
@@ -65,7 +91,7 @@ export function ProductionStatusBlock({
|
||||
});
|
||||
|
||||
return Array.from(uniqueAlerts.values());
|
||||
}, [alerts]);
|
||||
}, [alerts, lateToStartBatches, runningBatches, pendingBatches]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -88,12 +114,14 @@ export function ProductionStatusBlock({
|
||||
const hasLate = lateToStartBatches.length > 0;
|
||||
const hasRunning = runningBatches.length > 0;
|
||||
const hasPending = pendingBatches.length > 0;
|
||||
const hasAlerts = productionAlerts.length > 0;
|
||||
const hasEquipmentAlerts = equipmentAlerts.length > 0;
|
||||
const hasProductionAlerts = filteredProductionAlerts.length > 0;
|
||||
const hasAlerts = hasEquipmentAlerts || hasProductionAlerts;
|
||||
const hasAnyProduction = hasLate || hasRunning || hasPending || hasAlerts;
|
||||
const totalCount = lateToStartBatches.length + runningBatches.length + pendingBatches.length;
|
||||
|
||||
// Determine header status - prioritize alerts and late batches
|
||||
const status = hasAlerts || hasLate ? 'error' : hasRunning ? 'info' : hasPending ? 'warning' : 'success';
|
||||
// Determine header status - prioritize equipment alerts, then production alerts, then late batches
|
||||
const status = hasEquipmentAlerts ? 'error' : hasProductionAlerts || hasLate ? 'warning' : hasRunning ? 'info' : hasPending ? 'warning' : 'success';
|
||||
|
||||
const statusStyles = {
|
||||
success: {
|
||||
@@ -718,17 +746,32 @@ export function ProductionStatusBlock({
|
||||
{/* Content */}
|
||||
{hasAnyProduction ? (
|
||||
<div className="border-t border-[var(--border-primary)]">
|
||||
{/* Production Alerts Section */}
|
||||
{hasAlerts && (
|
||||
{/* Equipment Alerts Section */}
|
||||
{equipmentAlerts.length > 0 && (
|
||||
<div className="bg-[var(--color-error-50)]">
|
||||
<div className="px-6 py-3 border-b border-[var(--color-error-100)]">
|
||||
<h3 className="text-sm font-semibold text-[var(--color-error-700)] flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{t('dashboard:new_dashboard.production_status.alerts_section')}
|
||||
{t('dashboard:new_dashboard.production_status.equipment_alerts')}
|
||||
</h3>
|
||||
</div>
|
||||
{productionAlerts.map((alert, index) =>
|
||||
renderAlertItem(alert, index, productionAlerts.length)
|
||||
{equipmentAlerts.map((alert, index) =>
|
||||
renderAlertItem(alert, index, equipmentAlerts.length)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Production Alerts Section */}
|
||||
{filteredProductionAlerts.length > 0 && (
|
||||
<div className="bg-[var(--color-warning-50)]">
|
||||
<div className="px-6 py-3 border-b border-[var(--color-warning-100)]">
|
||||
<h3 className="text-sm font-semibold text-[var(--color-warning-700)] flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{t('dashboard:new_dashboard.production_status.production_alerts')}
|
||||
</h3>
|
||||
</div>
|
||||
{filteredProductionAlerts.map((alert, index) =>
|
||||
renderAlertItem(alert, index, filteredProductionAlerts.length)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -21,10 +21,10 @@ import {
|
||||
Sparkles,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import type { DashboardData, OrchestrationSummary } from '../../../api/hooks/useDashboardData';
|
||||
import type { ControlPanelData, OrchestrationSummary } from '../../../api/hooks/useControlPanelData';
|
||||
|
||||
interface SystemStatusBlockProps {
|
||||
data: DashboardData | undefined;
|
||||
data: ControlPanelData | undefined;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
@@ -137,8 +137,8 @@ export function SystemStatusBlock({ data, loading }: SystemStatusBlockProps) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Issues Prevented by AI */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-primary)]">
|
||||
{/* Issues Prevented by AI - Show specific issue types */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-primary)] group relative">
|
||||
<Bot className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
{issuesPreventedByAI}
|
||||
@@ -146,6 +146,32 @@ export function SystemStatusBlock({ data, loading }: SystemStatusBlockProps) {
|
||||
<span className="text-sm text-[var(--text-secondary)]">
|
||||
{t('dashboard:new_dashboard.system_status.ai_prevented_label')}
|
||||
</span>
|
||||
|
||||
{/* Show specific issue types on hover */}
|
||||
{preventedIssues.length > 0 && (
|
||||
<div className="absolute left-0 bottom-full mb-2 hidden group-hover:block z-10">
|
||||
<div className="bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg p-3 min-w-[200px]">
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)] mb-2">
|
||||
{t('dashboard:new_dashboard.system_status.prevented_issues_types')}
|
||||
</p>
|
||||
<div className="space-y-1 max-h-[150px] overflow-y-auto">
|
||||
{preventedIssues.slice(0, 3).map((issue: any, index: number) => (
|
||||
<div key={index} className="flex items-start gap-2 text-xs">
|
||||
<CheckCircle2 className="w-3 h-3 text-[var(--color-success-500)] mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)] truncate">
|
||||
{issue.title || issue.event_type || issue.message || t('dashboard:new_dashboard.system_status.issue_prevented')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{preventedIssues.length > 3 && (
|
||||
<div className="text-xs text-[var(--text-tertiary)] mt-1">
|
||||
+{preventedIssues.length - 3} {t('common:more')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Last Run */}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { MeasurementUnit } from '../../../../api/types/recipes';
|
||||
import { ProductType } from '../../../../api/types/inventory';
|
||||
import type { RecipeCreate, RecipeIngredientCreate } from '../../../../api/types/recipes';
|
||||
import { getAllRecipeTemplates, matchIngredientToTemplate, type RecipeTemplate } from '../data/recipeTemplates';
|
||||
import { QuickAddIngredientModal } from '../../inventory/QuickAddIngredientModal';
|
||||
@@ -566,7 +567,7 @@ export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
|
||||
>
|
||||
<option value="">{t('setup_wizard:recipes.placeholders.finished_product', 'Select finished product...')}</option>
|
||||
{ingredients
|
||||
.filter((ing) => ing.product_type === 'finished_product')
|
||||
.filter((ing) => ing.product_type === ProductType.FINISHED_PRODUCT)
|
||||
.map((ing) => (
|
||||
<option key={ing.id} value={ing.id}>
|
||||
{ing.name} ({ing.unit_of_measure})
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
import { getRegisterUrl } from '../../utils/navigation';
|
||||
|
||||
type BillingCycle = 'monthly' | 'yearly';
|
||||
type DisplayMode = 'landing' | 'settings';
|
||||
type DisplayMode = 'landing' | 'settings' | 'selection';
|
||||
|
||||
interface SubscriptionPricingCardsProps {
|
||||
mode?: DisplayMode;
|
||||
@@ -81,7 +81,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
};
|
||||
|
||||
const handlePlanAction = (tier: string, plan: PlanMetadata) => {
|
||||
if (mode === 'settings' && onPlanSelect) {
|
||||
if ((mode === 'settings' || mode === 'selection') && onPlanSelect) {
|
||||
onPlanSelect(tier);
|
||||
}
|
||||
};
|
||||
@@ -146,7 +146,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
)}
|
||||
|
||||
{/* Billing Cycle Toggle */}
|
||||
<div className="flex justify-center mb-12">
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="inline-flex rounded-lg border-2 border-[var(--border-primary)] p-1 bg-[var(--bg-secondary)]">
|
||||
<button
|
||||
onClick={() => setBillingCycle('monthly')}
|
||||
@@ -174,6 +174,16 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selection Mode Helper Text */}
|
||||
{mode === 'selection' && (
|
||||
<div className="text-center mb-6">
|
||||
<p className="text-sm text-[var(--text-secondary)] flex items-center justify-center gap-2">
|
||||
<span className="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
|
||||
{t('ui.click_to_select', 'Haz clic en cualquier plan para seleccionarlo')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Simplified Plans Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start lg:items-stretch">
|
||||
{Object.entries(plans).map(([tier, plan]) => {
|
||||
@@ -186,7 +196,11 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
const CardWrapper = mode === 'landing' ? Link : 'div';
|
||||
const cardProps = mode === 'landing'
|
||||
? { to: getRegisterUrl(tier) }
|
||||
: { onClick: () => handlePlanAction(tier, plan) };
|
||||
: mode === 'selection' || mode === 'settings'
|
||||
? { onClick: () => handlePlanAction(tier, plan) }
|
||||
: {};
|
||||
|
||||
const isSelected = mode === 'selection' && selectedPlan === tier;
|
||||
|
||||
return (
|
||||
<CardWrapper
|
||||
@@ -194,15 +208,27 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{...cardProps}
|
||||
className={`
|
||||
relative rounded-2xl p-8 transition-all duration-300 block no-underline
|
||||
${mode === 'settings' ? 'cursor-pointer' : mode === 'landing' ? 'cursor-pointer' : ''}
|
||||
${isPopular
|
||||
? 'bg-gradient-to-br from-blue-600 to-blue-800 shadow-xl ring-2 ring-blue-400 lg:scale-105 lg:z-10'
|
||||
: 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-lg'
|
||||
${mode === 'settings' || mode === 'selection' || mode === 'landing' ? 'cursor-pointer' : ''}
|
||||
${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'
|
||||
: 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-xl hover:scale-[1.03] hover:ring-2 hover:ring-[var(--color-primary)]/30'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Selected Badge */}
|
||||
{isSelected && (
|
||||
<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]" />
|
||||
{t('ui.selected', 'Seleccionado')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Popular Badge */}
|
||||
{isPopular && (
|
||||
{isPopular && !isSelected && (
|
||||
<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" />
|
||||
@@ -213,10 +239,10 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
|
||||
{/* Plan Header */}
|
||||
<div className="mb-6">
|
||||
<h3 className={`text-2xl font-bold mb-2 ${isPopular ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<h3 className={`text-2xl font-bold mb-2 ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
{plan.name}
|
||||
</h3>
|
||||
<p className={`text-sm ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-sm ${(isPopular || isSelected) ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
{plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}
|
||||
</p>
|
||||
</div>
|
||||
@@ -224,17 +250,17 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-baseline">
|
||||
<span className={`text-4xl font-bold ${isPopular ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<span className={`text-4xl font-bold ${(isPopular || isSelected) ? 'text-white' : '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 || isSelected) ? '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 ? 'bg-white/20 text-white' : 'bg-green-500/10 text-green-600 dark:text-green-400'
|
||||
(isPopular || isSelected) ? '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) })
|
||||
@@ -248,9 +274,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 ? 'bg-white/10' : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
|
||||
(isPopular || isSelected) ? 'bg-white/10' : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
|
||||
}`}>
|
||||
<p className={`text-sm font-medium ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-sm font-medium ${(isPopular || isSelected) ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
|
||||
{t(plan.recommended_for_key)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -259,12 +285,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
|
||||
(isPopular || isSelected)
|
||||
? '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 ? 'text-white drop-shadow-sm' : 'text-blue-600 dark:text-blue-300'
|
||||
(isPopular || isSelected) ? 'text-white drop-shadow-sm' : 'text-blue-600 dark:text-blue-300'
|
||||
}`}>
|
||||
✓ {t('ui.feature_inheritance_professional')}
|
||||
</p>
|
||||
@@ -272,12 +298,12 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
)}
|
||||
{tier === SUBSCRIPTION_TIERS.ENTERPRISE && (
|
||||
<div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
|
||||
isPopular
|
||||
(isPopular || isSelected)
|
||||
? '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 ? 'text-white drop-shadow-sm' : 'text-gray-700 dark:text-gray-300'
|
||||
(isPopular || isSelected) ? 'text-white drop-shadow-sm' : 'text-gray-700 dark:text-gray-300'
|
||||
}`}>
|
||||
✓ {t('ui.feature_inheritance_enterprise')}
|
||||
</p>
|
||||
@@ -291,34 +317,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 ? 'bg-white' : 'bg-green-500'
|
||||
(isPopular || isSelected) ? 'bg-white' : 'bg-green-500'
|
||||
}`}>
|
||||
<Check className={`w-3 h-3 ${isPopular ? 'text-blue-600' : 'text-white'}`} />
|
||||
<Check className={`w-3 h-3 ${(isPopular || isSelected) ? 'text-blue-600' : 'text-white'}`} />
|
||||
</div>
|
||||
</div>
|
||||
<span className={`ml-3 text-sm font-medium ${isPopular ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<span className={`ml-3 text-sm font-medium ${(isPopular || isSelected) ? '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 ? 'border-white/20' : 'border-[var(--border-primary)]'}`}>
|
||||
<div className={`pt-4 mt-4 border-t space-y-2 ${(isPopular || isSelected) ? 'border-white/20' : 'border-[var(--border-primary)]'}`}>
|
||||
<div className="flex items-center text-sm">
|
||||
<Users className={`w-4 h-4 mr-2 ${isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${isPopular ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<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)]'}`}>
|
||||
{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 ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${isPopular ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<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)]'}`}>
|
||||
{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 ? 'text-white/80' : 'text-[var(--text-secondary)]'}`} />
|
||||
<span className={`font-medium ${isPopular ? 'text-white' : 'text-[var(--text-primary)]'}`}>
|
||||
<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)]'}`}>
|
||||
{formatLimit(plan.limits.products, 'limits.products_unlimited')} {t('limits.products_label', 'productos')}
|
||||
</span>
|
||||
</div>
|
||||
@@ -328,23 +354,32 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
|
||||
{/* CTA Button */}
|
||||
<Button
|
||||
className={`w-full py-4 text-base font-semibold transition-all ${
|
||||
isPopular
|
||||
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') {
|
||||
if (mode === 'settings' || mode === 'selection') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handlePlanAction(tier, plan);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('ui.start_free_trial')}
|
||||
{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>
|
||||
)
|
||||
: t('ui.start_free_trial')}
|
||||
</Button>
|
||||
|
||||
{/* Footer */}
|
||||
<p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
|
||||
<p className={`text-xs text-center mt-3 ${(isPopular || isSelected) ? '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