Improve the demo feature of the project

frontend/src/features/demo-onboarding/utils/tour-analytics.ts

@@ -0,0 +1,40 @@
+import { TourAnalyticsEvent } from '../types';
+
+export const trackTourEvent = (event: TourAnalyticsEvent): void => {
+  try {
+    const demoSessionId = localStorage.getItem('demo_session_id');
+
+    const enrichedEvent = {
+      ...event,
+      sessionId: demoSessionId || undefined,
+    };
+
+    console.log('[Tour Analytics]', enrichedEvent);
+
+    if (window.gtag) {
+      window.gtag('event', event.event, {
+        event_category: 'demo_tour',
+        event_label: event.step !== undefined ? `step_${event.step}` : undefined,
+        session_id: demoSessionId,
+      });
+    }
+
+    if (window.plausible) {
+      window.plausible(event.event, {
+        props: {
+          step: event.step,
+          session_id: demoSessionId,
+        },
+      });
+    }
+  } catch (error) {
+    console.error('Error tracking tour event:', error);
+  }
+};
+
+declare global {
+  interface Window {
+    gtag?: (...args: any[]) => void;
+    plausible?: (event: string, options?: { props?: Record<string, any> }) => void;
+  }
+}

frontend/src/features/demo-onboarding/utils/tour-state.ts

@@ -0,0 +1,84 @@
+import { TourState } from '../types';
+
+const TOUR_STATE_KEY = 'bakery_demo_tour_state';
+const TOUR_VERSION = '1.0.0';
+
+export const getTourState = (): TourState | null => {
+  try {
+    const stored = sessionStorage.getItem(TOUR_STATE_KEY);
+    if (!stored) return null;
+
+    const state = JSON.parse(stored) as TourState;
+
+    if (state.tourVersion !== TOUR_VERSION) {
+      clearTourState();
+      return null;
+    }
+
+    return state;
+  } catch (error) {
+    console.error('Error reading tour state:', error);
+    return null;
+  }
+};
+
+export const saveTourState = (state: Partial<TourState>): void => {
+  try {
+    const currentState = getTourState() || {
+      currentStep: 0,
+      completed: false,
+      dismissed: false,
+      lastUpdated: Date.now(),
+      tourVersion: TOUR_VERSION,
+    };
+
+    const newState: TourState = {
+      ...currentState,
+      ...state,
+      lastUpdated: Date.now(),
+      tourVersion: TOUR_VERSION,
+    };
+
+    sessionStorage.setItem(TOUR_STATE_KEY, JSON.stringify(newState));
+  } catch (error) {
+    console.error('Error saving tour state:', error);
+  }
+};
+
+export const clearTourState = (): void => {
+  try {
+    sessionStorage.removeItem(TOUR_STATE_KEY);
+  } catch (error) {
+    console.error('Error clearing tour state:', error);
+  }
+};
+
+export const shouldStartTour = (): boolean => {
+  const tourState = getTourState();
+  const shouldStart = sessionStorage.getItem('demo_tour_should_start') === 'true';
+
+  console.log('[shouldStartTour] tourState:', tourState);
+  console.log('[shouldStartTour] shouldStart flag:', shouldStart);
+
+  // If explicitly marked to start, always start (unless already completed)
+  if (shouldStart) {
+    if (tourState && tourState.completed) {
+      console.log('[shouldStartTour] Tour already completed, not starting');
+      return false;
+    }
+    console.log('[shouldStartTour] Should start flag is true, starting tour');
+    return true;
+  }
+
+  // No explicit start flag, don't auto-start
+  console.log('[shouldStartTour] No start flag, not starting');
+  return false;
+};
+
+export const markTourAsStartPending = (): void => {
+  sessionStorage.setItem('demo_tour_should_start', 'true');
+};
+
+export const clearTourStartPending = (): void => {
+  sessionStorage.removeItem('demo_tour_should_start');
+};