Improve the demo feature of the project
This commit is contained in:
Urtzi Alfaro
@@ -0,0 +1,41 @@
|
||||
import { Config } from 'driver.js';
|
||||
|
||||
export const getDriverConfig = (
|
||||
onNext?: (stepIndex: number) => void
|
||||
): Config => ({
|
||||
showProgress: true,
|
||||
animate: true,
|
||||
smoothScroll: true,
|
||||
allowClose: true,
|
||||
overlayClickNext: false,
|
||||
stagePadding: 10,
|
||||
stageRadius: 8,
|
||||
allowKeyboardControl: true,
|
||||
disableActiveInteraction: false,
|
||||
|
||||
doneBtnText: 'Crear Cuenta Gratis',
|
||||
closeBtnText: '×',
|
||||
nextBtnText: 'Siguiente →',
|
||||
prevBtnText: '← Anterior',
|
||||
progressText: 'Paso {{current}} de {{total}}',
|
||||
|
||||
popoverClass: 'bakery-tour-popover',
|
||||
popoverOffset: 10,
|
||||
|
||||
onHighlightStarted: (element, step, options) => {
|
||||
const currentIndex = options.state?.activeIndex || 0;
|
||||
|
||||
console.log('[Driver] Highlighting element:', element);
|
||||
console.log('[Driver] Step:', step);
|
||||
console.log('[Driver] Current index:', currentIndex);
|
||||
|
||||
// Track step when it's highlighted
|
||||
if (onNext && currentIndex > 0) {
|
||||
onNext(currentIndex);
|
||||
}
|
||||
},
|
||||
|
||||
onHighlighted: (element, step, options) => {
|
||||
console.log('[Driver] Element highlighted successfully:', element);
|
||||
},
|
||||
});
|
||||
176
frontend/src/features/demo-onboarding/config/tour-steps.ts
Normal file
176
frontend/src/features/demo-onboarding/config/tour-steps.ts
Normal file
@@ -0,0 +1,176 @@
|
||||
import { DriveStep } from 'driver.js';
|
||||
|
||||
export const getDemoTourSteps = (): DriveStep[] => [
|
||||
{
|
||||
element: '[data-tour="demo-banner"]',
|
||||
popover: {
|
||||
title: '¡Bienvenido a BakeryIA Demo!',
|
||||
description: 'Estás en una sesión demo de 30 minutos con datos reales de una panadería española. Te guiaremos por las funciones principales de la plataforma. Puedes cerrar el tour en cualquier momento con ESC.',
|
||||
side: 'bottom',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="dashboard-stats"]',
|
||||
popover: {
|
||||
title: 'Métricas en Tiempo Real',
|
||||
description: 'Aquí ves las métricas clave de tu panadería actualizadas al instante: ventas del día, pedidos pendientes, productos vendidos y alertas de stock crítico.',
|
||||
side: 'bottom',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="real-time-alerts"]',
|
||||
popover: {
|
||||
title: 'Alertas Inteligentes',
|
||||
description: 'El sistema te avisa automáticamente de stock bajo, pedidos urgentes, predicciones de demanda y oportunidades de producción. Toda la información importante en un solo lugar.',
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="procurement-plans"]',
|
||||
popover: {
|
||||
title: 'Planes de Aprovisionamiento',
|
||||
description: 'Visualiza qué ingredientes necesitas comprar hoy según tus planes de producción. El sistema calcula automáticamente las cantidades necesarias.',
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="production-plans"]',
|
||||
popover: {
|
||||
title: 'Gestión de Producción',
|
||||
description: 'Consulta y gestiona tus órdenes de producción programadas. Puedes ver el estado de cada orden, los ingredientes necesarios y el tiempo estimado.',
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="sidebar-database"]',
|
||||
popover: {
|
||||
title: 'Base de Datos de tu Panadería',
|
||||
description: 'Accede a toda la información de tu negocio: inventario de ingredientes, recetas, proveedores, equipos y equipo de trabajo.',
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="sidebar-operations"]',
|
||||
popover: {
|
||||
title: 'Operaciones Diarias',
|
||||
description: 'Gestiona las operaciones del día a día: aprovisionamiento de ingredientes, producción de recetas y punto de venta (POS) para registrar ventas.',
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="sidebar-analytics"]',
|
||||
popover: {
|
||||
title: 'Análisis e Inteligencia Artificial',
|
||||
description: 'Accede a análisis avanzados de ventas, producción y pronósticos de demanda con IA. Simula escenarios y obtén insights inteligentes para tu negocio.',
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="header-tenant-selector"]',
|
||||
popover: {
|
||||
title: 'Multi-Panadería',
|
||||
description: 'Si gestionas varias panaderías o puntos de venta, puedes cambiar entre ellas fácilmente desde aquí. Cada panadería tiene sus propios datos aislados.',
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="demo-banner-actions"]',
|
||||
popover: {
|
||||
title: 'Limitaciones del Demo',
|
||||
description: 'En modo demo puedes explorar todas las funciones, pero algunas acciones destructivas están deshabilitadas. Los cambios que hagas no se guardarán después de que expire la sesión.',
|
||||
side: 'bottom',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
popover: {
|
||||
title: '¿Listo para gestionar tu panadería real?',
|
||||
description: 'Has explorado las funcionalidades principales de BakeryIA. Crea una cuenta gratuita para acceder a todas las funciones sin límites, guardar tus datos de forma permanente y conectar tu negocio real.',
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const getMobileTourSteps = (): DriveStep[] => [
|
||||
{
|
||||
element: '[data-tour="demo-banner"]',
|
||||
popover: {
|
||||
title: '¡Bienvenido a BakeryIA!',
|
||||
description: 'Sesión demo de 30 minutos con datos reales. Te mostraremos las funciones clave.',
|
||||
side: 'bottom',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="dashboard-stats"]',
|
||||
popover: {
|
||||
title: 'Métricas en Tiempo Real',
|
||||
description: 'Ventas, pedidos, productos y alertas actualizadas al instante.',
|
||||
side: 'bottom',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="real-time-alerts"]',
|
||||
popover: {
|
||||
title: 'Alertas Inteligentes',
|
||||
description: 'Stock bajo, pedidos urgentes y predicciones de demanda en un solo lugar.',
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="procurement-plans"]',
|
||||
popover: {
|
||||
title: 'Aprovisionamiento',
|
||||
description: 'Ingredientes que necesitas comprar hoy calculados automáticamente.',
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="production-plans"]',
|
||||
popover: {
|
||||
title: 'Producción',
|
||||
description: 'Gestiona órdenes de producción y consulta ingredientes necesarios.',
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="sidebar-menu-toggle"]',
|
||||
popover: {
|
||||
title: 'Menú de Navegación',
|
||||
description: 'Toca aquí para acceder a Base de Datos, Operaciones y Análisis.',
|
||||
side: 'bottom',
|
||||
align: 'start',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '[data-tour="demo-banner-actions"]',
|
||||
popover: {
|
||||
title: 'Limitaciones del Demo',
|
||||
description: 'Puedes explorar todo, pero los cambios no se guardan permanentemente.',
|
||||
side: 'bottom',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
popover: {
|
||||
title: '¿Listo para tu panadería real?',
|
||||
description: 'Crea una cuenta gratuita para acceso completo sin límites y datos permanentes.',
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user