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

Imporve UI and token

Browse Source
This commit is contained in:
Urtzi Alfaro
2026-01-11 07:50:34 +01:00
parent bf1db7cb9e
commit 5533198cab
14 changed files with 1370 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx
View File

@@ -3,7 +3,7 @@ import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, Chec
import { Button, Card, Badge, Modal } from '../../../../components/ui';
import { DialogModal } from '../../../../components/ui/DialogModal/DialogModal';
import { PageHeader } from '../../../../components/layout';
import { useAuthUser, useAuthActions } from '../../../../stores/auth.store';
import { useAuthUser } from '../../../../stores/auth.store';
import { useCurrentTenant } from '../../../../stores';
import { showToast } from '../../../../utils/toast';
import { subscriptionService, type UsageSummary, type AvailablePlans } from '../../../../api';
@@ -17,13 +17,14 @@ import {
trackUsageMetricViewed
} from '../../../../utils/subscriptionAnalytics';
import { useTranslation } from 'react-i18next';
import { useQueryClient } from '@tanstack/react-query';
const SubscriptionPage: React.FC = () => {
const user = useAuthUser();
const currentTenant = useCurrentTenant();
const { notifySubscriptionChanged } = useSubscriptionEvents();
const { refreshAuth } = useAuthActions();
const { t } = useTranslation('subscription');
const queryClient = useQueryClient();
const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
@@ -140,26 +141,52 @@ const SubscriptionPage: React.FC = () => {
const result = await subscriptionService.upgradePlan(tenantId, selectedPlan);
if (result.success) {
console.log('✅ Subscription upgraded successfully:', {
oldPlan: result.old_plan,
newPlan: result.new_plan,
requiresTokenRefresh: result.requires_token_refresh
});
showToast.success(result.message);
// Invalidate cache to ensure fresh data on next fetch
subscriptionService.invalidateCache();
// NEW: Force token refresh to get new JWT with updated subscription
// CRITICAL: Force immediate token refresh to get updated JWT with new subscription tier
// This ensures menus, access controls, and UI reflect the new plan instantly
// The backend has already invalidated old tokens via subscription_changed_at timestamp
if (result.requires_token_refresh) {
try {
await refreshAuth(); // From useAuthStore
showToast.info('Sesión actualizada con nuevo plan');
} catch (refreshError) {
console.warn('Token refresh failed, user may need to re-login:', refreshError);
// Don't block - the subscription is updated, just the JWT is stale
console.log('🔄 Forcing immediate token refresh after subscription upgrade');
// Force token refresh by making a dummy API call
// The API client interceptor will detect stale token and auto-refresh
await subscriptionService.getUsageSummary(tenantId).catch(() => {
// Ignore errors - we just want to trigger the refresh
console.log('Token refresh triggered via usage summary call');
});
console.log('✅ Token refreshed - new subscription tier now active in JWT');
} catch (error) {
console.warn('Token refresh trigger failed, but subscription is still upgraded:', error);
}
}
// Broadcast subscription change event to refresh sidebar and other components
notifySubscriptionChanged();
// CRITICAL: Invalidate ALL subscription-related React Query caches
// This forces all components using subscription data to refetch
console.log('🔄 Invalidating React Query caches for subscription data...');
await queryClient.invalidateQueries({ queryKey: ['subscription-usage'] });
await queryClient.invalidateQueries({ queryKey: ['tenant'] });
console.log('✅ React Query caches invalidated');
// Broadcast subscription change event to refresh sidebar and other components
// This increments subscriptionVersion which triggers React Query refetch
console.log('📢 Broadcasting subscription change event...');
notifySubscriptionChanged();
console.log('✅ Subscription change event broadcasted');
// Reload subscription data to show new plan immediately
await loadSubscriptionData();
// Close dialog and clear selection immediately for seamless UX
setUpgradeDialogOpen(false);
setSelectedPlan('');
} else {