Add DEMO feature to the project

frontend/src/stores/useTenantInitializer.ts

@@ -1,27 +1,57 @@
 import { useEffect } from 'react';
 import { useIsAuthenticated } from './auth.store';
-import { useTenantActions, useAvailableTenants } from './tenant.store';
+import { useTenantActions, useAvailableTenants, useCurrentTenant } from './tenant.store';
+import { useIsDemoMode, useDemoSessionId, useDemoAccountType } from '../hooks/useAccessControl';
 
 /**
- * Hook to automatically initialize tenant data when user is authenticated
+ * Hook to automatically initialize tenant data when user is authenticated or in demo mode
  * This should be used at the app level to ensure tenant data is loaded
  */
 export const useTenantInitializer = () => {
   const isAuthenticated = useIsAuthenticated();
+  const isDemoMode = useIsDemoMode();
+  const demoSessionId = useDemoSessionId();
+  const demoAccountType = useDemoAccountType();
   const availableTenants = useAvailableTenants();
-  const { loadUserTenants } = useTenantActions();
+  const currentTenant = useCurrentTenant();
+  const { loadUserTenants, setCurrentTenant } = useTenantActions();
 
+  // Load tenants for authenticated users
   useEffect(() => {
     if (isAuthenticated && !availableTenants) {
-      // Load user's available tenants when authenticated and not already loaded
       loadUserTenants();
     }
   }, [isAuthenticated, availableTenants, loadUserTenants]);
 
-  // Also load tenants when user becomes authenticated (e.g., after login)
+  // Set up mock tenant for demo mode
   useEffect(() => {
-    if (isAuthenticated && availableTenants === null) {
-      loadUserTenants();
+    if (isDemoMode && demoSessionId) {
+      const demoTenantId = localStorage.getItem('demo_tenant_id') || 'demo-tenant-id';
+
+      // Check if current tenant is the demo tenant and is properly set
+      const isValidDemoTenant = currentTenant &&
+        typeof currentTenant === 'object' &&
+        currentTenant.id === demoTenantId;
+
+      if (!isValidDemoTenant) {
+        const accountTypeName = demoAccountType === 'individual_bakery'
+          ? 'Panadería San Pablo - Demo'
+          : 'Panadería La Espiga - Demo';
+
+        // Create a mock tenant object matching TenantResponse structure
+        const mockTenant = {
+          id: demoTenantId,
+          name: accountTypeName,
+          subdomain: `demo-${demoSessionId.slice(0, 8)}`,
+          plan_type: 'professional', // Use a valid plan type
+          is_active: true,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        };
+
+        // Set the demo tenant as current
+        setCurrentTenant(mockTenant);
+      }
     }
-  }, [isAuthenticated, availableTenants, loadUserTenants]);
+  }, [isDemoMode, demoSessionId, demoAccountType, currentTenant, setCurrentTenant]);
 };