Start integrating the onboarding flow with backend 1

frontend/src/pages/app/onboarding/OnboardingPage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { OnboardingWizard, OnboardingStep } from '../../../components/domain/onboarding/OnboardingWizard';
 import { onboardingApiService } from '../../../services/api/onboarding.service';
-import { useAuth } from '../../../hooks/useAuth';
+import { useAuthUser, useIsAuthenticated } from '../../../stores/auth.store';
 import { LoadingSpinner } from '../../../components/shared/LoadingSpinner';
 
 // Step Components
@@ -16,7 +16,8 @@ import { CompletionStep } from '../../../components/domain/onboarding/steps/Comp
 
 const OnboardingPage: React.FC = () => {
   const navigate = useNavigate();
-  const { user } = useAuth();
+  const user = useAuthUser();
+  const isAuthenticated = useIsAuthenticated();
   const [isLoading, setIsLoading] = useState(false);
   const [globalData, setGlobalData] = useState<any>({});
 
@@ -30,8 +31,11 @@ const OnboardingPage: React.FC = () => {
       isRequired: true,
       validation: (data) => {
         if (!data.bakery?.name) return 'El nombre de la panadería es requerido';
-        if (!data.bakery?.type) return 'El tipo de panadería es requerido';
-        if (!data.bakery?.location) return 'La ubicación es requerida';
+        if (!data.bakery?.business_model) return 'El modelo de negocio es requerido';
+        if (!data.bakery?.address) return 'La dirección es requerida';
+        if (!data.bakery?.city) return 'La ciudad es requerida';
+        if (!data.bakery?.postal_code) return 'El código postal es requerido';
+        if (!data.bakery?.phone) return 'El teléfono es requerido';
         // Tenant creation will happen automatically when validation passes
         return null;
       }
@@ -142,10 +146,27 @@ const OnboardingPage: React.FC = () => {
     }
   };
 
+  // Redirect to login if not authenticated
+  useEffect(() => {
+    if (!isAuthenticated) {
+      navigate('/login', { 
+        state: { 
+          message: 'Debes iniciar sesión para acceder al onboarding.',
+          returnUrl: '/app/onboarding' 
+        }
+      });
+    }
+  }, [isAuthenticated, navigate]);
+
   if (isLoading) {
     return <LoadingSpinner overlay text="Completando configuración..." />;
   }
 
+  // Don't render if not authenticated (will redirect)
+  if (!isAuthenticated || !user) {
+    return <LoadingSpinner overlay text="Verificando autenticación..." />;
+  }
+
   return (
     <div className="min-h-screen bg-[var(--bg-primary)]">
       <OnboardingWizard

frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

@@ -30,8 +30,8 @@ import {
   Download,
   ExternalLink
 } from 'lucide-react';
-import { useAuth } from '../../../../hooks/api/useAuth';
-import { useBakeryStore } from '../../../../stores/bakery.store';
+import { useAuthUser } from '../../../../stores/auth.store';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { useToast } from '../../../../hooks/ui/useToast';
 import { 
   subscriptionService, 
@@ -238,8 +238,8 @@ const PlanComparison: React.FC<PlanComparisonProps> = ({ plans, currentPlan, onU
 };
 
 const SubscriptionPage: React.FC = () => {
-  const { user, tenant_id } = useAuth();
-  const { currentTenant } = useBakeryStore();
+  const user = useAuthUser();
+  const currentTenant = useCurrentTenant();
   const toast = useToast();
   const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
   const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
@@ -249,13 +249,13 @@ const SubscriptionPage: React.FC = () => {
   const [upgrading, setUpgrading] = useState(false);
 
   useEffect(() => {
-    if (currentTenant?.id || tenant_id || isMockMode()) {
+    if (currentTenant?.id || user?.tenant_id || isMockMode()) {
       loadSubscriptionData();
     }
-  }, [currentTenant, tenant_id]);
+  }, [currentTenant, user?.tenant_id]);
 
   const loadSubscriptionData = async () => {
-    let tenantId = currentTenant?.id || tenant_id;
+    let tenantId = currentTenant?.id || user?.tenant_id;
     
     // In mock mode, use the mock tenant ID if no real tenant is available
     if (isMockMode() && !tenantId) {
@@ -290,7 +290,7 @@ const SubscriptionPage: React.FC = () => {
   };
 
   const handleUpgradeConfirm = async () => {
-    let tenantId = currentTenant?.id || tenant_id;
+    let tenantId = currentTenant?.id || user?.tenant_id;
     
     // In mock mode, use the mock tenant ID if no real tenant is available
     if (isMockMode() && !tenantId) {

frontend/src/pages/app/settings/subscription/SubscriptionPageOld.tsx

@@ -31,7 +31,7 @@ import {
   ExternalLink
 } from 'lucide-react';
 import { useAuth } from '../../../../hooks/api/useAuth';
-import { useBakeryStore } from '../../../../stores/bakery.store';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { useToast } from '../../../../hooks/ui/useToast';
 import { 
   subscriptionService, 
@@ -287,7 +287,7 @@ const PlanComparison: React.FC<PlanComparisonProps> = ({ plans, currentPlan, onU
 
 const SubscriptionPage: React.FC = () => {
   const { user, tenant_id } = useAuth();
-  const { currentTenant } = useBakeryStore();
+  const currentTenant = useCurrentTenant();
   const toast = useToast();
   const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
   const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);