Improve the demo feature of the project

2025-10-12 18:47:33 +02:00
parent dbc7f2fa0d
commit 7556a00db7
168 changed files with 10102 additions and 18869 deletions
--- a/frontend/src/components/layout/AppShell/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell/AppShell.tsx
@@ -211,9 +211,6 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
      )}
      data-testid="app-shell"
    >
-      {/* Demo Banner */}
-      <DemoBanner />
-
      {/* Header */}
      {shouldShowHeader && (
        <Header
@@ -223,6 +220,9 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
          />
      )}

+      {/* Demo Banner - appears below header */}
+      <DemoBanner />
+
      <div className="flex flex-1 relative">
        {/* Sidebar */}
        {shouldShowSidebar && (
--- a/frontend/src/components/layout/DemoBanner/DemoBanner.tsx
+++ b/frontend/src/components/layout/DemoBanner/DemoBanner.tsx
@@ -2,19 +2,26 @@ import React, { useState, useEffect } from 'react';
 import { extendDemoSession, destroyDemoSession } from '../../../api/services/demo';
 import { apiClient } from '../../../api/client';
 import { useNavigate } from 'react-router-dom';
+import { useDemoTour, getTourState, trackTourEvent } from '../../../features/demo-onboarding';
+import { BookOpen, Clock, Sparkles, X } from 'lucide-react';

 export const DemoBanner: React.FC = () => {
  const navigate = useNavigate();
-  const [isDemo, setIsDemo] = useState(false);
-  const [expiresAt, setExpiresAt] = useState<string | null>(null);
+  const { startTour, resumeTour, tourState } = useDemoTour();
+  const [isDemo, setIsDemo] = useState(() => localStorage.getItem('demo_mode') === 'true');
+  const [expiresAt, setExpiresAt] = useState<string | null>(() => localStorage.getItem('demo_expires_at'));
  const [timeRemaining, setTimeRemaining] = useState<string>('');
  const [canExtend, setCanExtend] = useState(true);
  const [extending, setExtending] = useState(false);
+  const [showExitModal, setShowExitModal] = useState(false);

  useEffect(() => {
    const demoMode = localStorage.getItem('demo_mode') === 'true';
    const expires = localStorage.getItem('demo_expires_at');

+    console.log('[DemoBanner] Demo mode from localStorage:', demoMode);
+    console.log('[DemoBanner] Expires at:', expires);
+
    setIsDemo(demoMode);
    setExpiresAt(expires);

@@ -43,6 +50,7 @@ export const DemoBanner: React.FC = () => {
    localStorage.removeItem('demo_session_id');
    localStorage.removeItem('demo_account_type');
    localStorage.removeItem('demo_expires_at');
+    localStorage.removeItem('demo_tenant_id');
    apiClient.setDemoSessionId(null);
    navigate('/demo');
  };
@@ -69,77 +77,172 @@ export const DemoBanner: React.FC = () => {
  };

  const handleEndSession = async () => {
+    setShowExitModal(true);
+  };
+
+  const confirmEndSession = async () => {
    const sessionId = apiClient.getDemoSessionId();
    if (!sessionId) return;

-    if (confirm('¿Estás seguro de que quieres terminar la sesión demo?')) {
-      try {
-        await destroyDemoSession({ session_id: sessionId });
-      } catch (error) {
-        console.error('Error destroying session:', error);
-      } finally {
-        handleExpiration();
-      }
+    try {
+      await destroyDemoSession({ session_id: sessionId });
+    } catch (error) {
+      console.error('Error destroying session:', error);
+    } finally {
+      handleExpiration();
    }
  };

-  if (!isDemo) return null;
+  const handleCreateAccount = () => {
+    trackTourEvent({
+      event: 'conversion_cta_clicked',
+      timestamp: Date.now(),
+    });
+    navigate('/register?from=demo_banner');
+  };
+
+  const handleStartTour = () => {
+    if (tourState && tourState.currentStep > 0 && !tourState.completed) {
+      resumeTour();
+    } else {
+      startTour();
+    }
+  };
+
+  if (!isDemo) {
+    console.log('[DemoBanner] Not demo mode, returning null');
+    return null;
+  }

  return (
-    <div className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-4 py-2 shadow-md">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center">
-            <svg
-              className="w-5 h-5 mr-2"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path
-                fillRule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clipRule="evenodd"
-              />
-            </svg>
-            <span className="font-medium">Modo Demo</span>
+    <>
+      <div
+        data-tour="demo-banner"
+        className="bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg sticky top-[var(--header-height)] z-[1100]"
+        style={{ minHeight: '60px' }}
+      >
+        <div className="max-w-7xl mx-auto px-4 py-3">
+          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
+            {/* Left section - Demo info */}
+            <div className="flex items-center gap-4 flex-wrap">
+              <div className="flex items-center gap-2">
+                <Sparkles className="w-5 h-5" />
+                <span className="font-bold text-base">Sesión Demo Activa</span>
+              </div>
+
+              <div className="flex items-center gap-2 text-sm bg-white/20 rounded-md px-3 py-1">
+                <Clock className="w-4 h-4" />
+                <span className="font-mono font-semibold">{timeRemaining}</span>
+              </div>
+
+              {tourState && !tourState.completed && tourState.currentStep > 0 && (
+                <div className="hidden md:flex items-center gap-2 text-sm bg-white/20 rounded-md px-3 py-1">
+                  <span>Tutorial pausado en paso {tourState.currentStep}</span>
+                </div>
+              )}
+            </div>
+
+            {/* Right section - Actions */}
+            <div data-tour="demo-banner-actions" className="flex items-center gap-2 flex-wrap">
+              {/* Tour button */}
+              <button
+                onClick={handleStartTour}
+                className="inline-flex items-center gap-2 px-4 py-2 bg-white text-amber-600 rounded-lg text-sm font-semibold hover:bg-amber-50 transition-all shadow-sm hover:shadow-md"
+              >
+                <BookOpen className="w-4 h-4" />
+                <span className="hidden sm:inline">
+                  {tourState && tourState.currentStep > 0 && !tourState.completed
+                    ? 'Continuar Tutorial'
+                    : 'Ver Tutorial'}
+                </span>
+                <span className="sm:hidden">Tutorial</span>
+              </button>
+
+              {/* Create account CTA */}
+              <button
+                onClick={handleCreateAccount}
+                className="inline-flex items-center gap-2 px-4 py-2 bg-white text-orange-600 rounded-lg text-sm font-bold hover:bg-orange-50 transition-all shadow-sm hover:shadow-md animate-pulse hover:animate-none"
+              >
+                <Sparkles className="w-4 h-4" />
+                <span className="hidden lg:inline">¡Crear Cuenta Gratis!</span>
+                <span className="lg:hidden">Crear Cuenta</span>
+              </button>
+
+              {/* Extend session */}
+              {canExtend && (
+                <button
+                  onClick={handleExtendSession}
+                  disabled={extending}
+                  className="px-3 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 hidden sm:block"
+                >
+                  {extending ? 'Extendiendo...' : '+30 min'}
+                </button>
+              )}
+
+              {/* End session */}
+              <button
+                onClick={handleEndSession}
+                className="px-3 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-sm font-medium transition-colors"
+              >
+                <span className="hidden sm:inline">Salir</span>
+                <X className="w-4 h-4 sm:hidden" />
+              </button>
+            </div>
          </div>
-
-          <div className="hidden sm:flex items-center text-sm">
-            <svg
-              className="w-4 h-4 mr-1"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path
-                fillRule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-                clipRule="evenodd"
-              />
-            </svg>
-            Tiempo restante: <span className="font-mono ml-1">{timeRemaining}</span>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          {canExtend && (
-            <button
-              onClick={handleExtendSession}
-              disabled={extending}
-              className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-md text-sm font-medium transition-colors disabled:opacity-50"
-            >
-              {extending ? 'Extendiendo...' : '+30 min'}
-            </button>
-          )}
-
-          <button
-            onClick={handleEndSession}
-            className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-md text-sm font-medium transition-colors"
-          >
-            Terminar Demo
-          </button>
        </div>
      </div>
-    </div>
+
+      {/* Exit confirmation modal */}
+      {showExitModal && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999] flex items-center justify-center p-4">
+          <div className="bg-[var(--bg-primary)] rounded-2xl shadow-2xl max-w-md w-full p-6 border border-[var(--border-default)]">
+            <div className="flex items-start gap-4 mb-4">
+              <div className="p-3 bg-amber-100 dark:bg-amber-900/30 rounded-xl">
+                <Sparkles className="w-6 h-6 text-amber-600 dark:text-amber-400" />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
+                  ¿Seguro que quieres salir?
+                </h3>
+                <p className="text-[var(--text-secondary)] text-sm leading-relaxed">
+                  Aún te quedan <span className="font-bold text-amber-600">{timeRemaining}</span> de sesión demo.
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/30 rounded-xl p-4 mb-6 border border-amber-200 dark:border-amber-800">
+              <p className="text-sm font-semibold text-[var(--text-primary)] mb-3">
+                ¿Te gusta lo que ves?
+              </p>
+              <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
+                Crea una cuenta <span className="font-bold">gratuita</span> para acceder a todas las funcionalidades sin límites de tiempo y guardar tus datos de forma permanente.
+              </p>
+              <button
+                onClick={handleCreateAccount}
+                className="w-full py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-lg font-bold hover:from-amber-600 hover:to-orange-600 transition-all shadow-md hover:shadow-lg"
+              >
+                Crear Mi Cuenta Gratis
+              </button>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowExitModal(false)}
+                className="flex-1 px-4 py-2.5 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)] rounded-lg font-semibold transition-colors border border-[var(--border-default)]"
+              >
+                Seguir en Demo
+              </button>
+              <button
+                onClick={confirmEndSession}
+                className="flex-1 px-4 py-2.5 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 rounded-lg font-semibold transition-colors border border-red-200 dark:border-red-800"
+              >
+                Salir de Demo
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
  );
 };

--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -154,15 +154,17 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
      {/* Left section */}
      <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0 h-full">
        {/* Mobile menu button */}
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onMenuClick}
-          className="lg:hidden w-10 h-10 p-0 flex items-center justify-center hover:bg-[var(--bg-secondary)] active:scale-95 transition-all duration-150"
-          aria-label={t('common:header.open_menu', 'Abrir menú de navegación')}
-        >
-          <Menu className="h-5 w-5 text-[var(--text-primary)]" />
-        </Button>
+        <div data-tour="sidebar-menu-toggle">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onMenuClick}
+            className="lg:hidden w-10 h-10 p-0 flex items-center justify-center hover:bg-[var(--bg-secondary)] active:scale-95 transition-all duration-150"
+            aria-label={t('common:header.open_menu', 'Abrir menú de navegación')}
+          >
+            <Menu className="h-5 w-5 text-[var(--text-primary)]" />
+          </Button>
+        </div>

        {/* Logo */}
        <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-shrink-0">
@@ -185,7 +187,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({

        {/* Tenant Switcher - Desktop */}
        {hasAccess && (
-          <div className="hidden md:block mx-2 lg:mx-4 flex-shrink-0">
+          <div className="hidden md:block mx-2 lg:mx-4 flex-shrink-0" data-tour="header-tenant-selector">
            <TenantSwitcher
              showLabel={true}
              className="min-w-[160px] max-w-[220px] lg:min-w-[200px] lg:max-w-[280px]"
--- a/frontend/src/components/layout/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar/Sidebar.tsx
@@ -516,6 +516,16 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
    const isHovered = hoveredItem === item.id;
    const ItemIcon = item.icon;

+    // Add tour data attributes for main navigation sections
+    const getTourAttribute = (itemPath: string) => {
+      if (itemPath === '/app/database') return 'sidebar-database';
+      if (itemPath === '/app/operations') return 'sidebar-operations';
+      if (itemPath === '/app/analytics') return 'sidebar-analytics';
+      return undefined;
+    };
+
+    const tourAttr = getTourAttribute(item.path);
+
    const itemContent = (
      <div
        className={clsx(
@@ -635,7 +645,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
    );

    return (
-      <li key={item.id} className="relative">
+      <li key={item.id} className="relative" data-tour={tourAttr}>
        {isCollapsed && !hasChildren && ItemIcon ? (
          <Tooltip content={item.label} side="right">
            {button}