Merge branch 'main' of github.com:journium/react-vite-example

Author: arunkpatra-astro

src/components/CelebrationDialog.tsx

@@ -1,6 +1,8 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import { track, EVENTS } from "@/lib/events";
 import { Sparkles, TrendingUp, PartyPopper } from "lucide-react";
 
 interface CelebrationDialogProps {
@@ -14,7 +16,19 @@ export function CelebrationDialog({ open, onOpenChange, completedCount, totalCou
   const navigate = useNavigate();
   const isFullCompletion = completedCount === totalCount;
 
+  // Track dialog shown
+  useEffect(() => {
+    if (open) {
+      track(EVENTS.DAY_COMPLETION_DIALOG_SHOWN, {
+        completedCount,
+        totalCount,
+        isFullCompletion
+      });
+    }
+  }, [open, completedCount, totalCount, isFullCompletion]);
+
   const handleViewInsights = () => {
+    track(EVENTS.DAY_COMPLETION_VIEW_INSIGHTS_CLICKED);
     onOpenChange(false);
     navigate("/insights");
   };

src/components/PaywallDialog.tsx

@@ -3,37 +3,45 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Check, X, Sparkles, Zap } from "lucide-react";
 import { useApp } from "@/lib/store";
+import { useEffect } from "react";
 import { toast } from "sonner";
-import { track, Events } from "@/lib/events";
+import { track, EVENTS } from "@/lib/events";
 
 interface PaywallDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  trigger?: 'habit_limit' | 'insights' | 'upgrade_card';
+  trigger?: 'habit_limit' | 'insights' | 'upgrade_card' | string;
 }
 
 export function PaywallDialog({ open, onOpenChange, trigger = 'upgrade_card' }: PaywallDialogProps) {
   const { upgradeToPro } = useApp();
 
+  // Track paywall viewed when opened
+  useEffect(() => {
+    if (open) {
+      track(EVENTS.PAYWALL_VIEWED, { trigger });
+    }
+  }, [open, trigger]);
+
   const handleUpgrade = () => {
-    // TODO: Analytics - paywall upgrade clicked
-    track(Events.PAYWALL_UPGRADE_CLICKED, { trigger });
+    track(EVENTS.UPGRADE_CLICKED, { trigger });
 
     upgradeToPro();
     toast.success("Welcome to Pro! 🎉", {
       description: "You now have access to all premium features.",
     });
 
-    // TODO: Analytics - upgrade success
-    track(Events.UPGRADE_SUCCESS, { trigger });
+    track(EVENTS.UPGRADE_SUCCEEDED, { trigger });
 
     onOpenChange(false);
   };
 
-  // TODO: Analytics - paywall shown
-  if (open) {
-    track(Events.PAYWALL_SHOWN, { trigger });
-  }
+  const handleDismiss = (open: boolean) => {
+    if (!open) {
+      track(EVENTS.PAYWALL_DISMISSED, { trigger });
+    }
+    onOpenChange(open);
+  };
 
   const features = [
     { name: "Active habits", free: "3", pro: "Unlimited" },
@@ -47,7 +55,7 @@ export function PaywallDialog({ open, onOpenChange, trigger = 'upgrade_card' }:
   ];
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleDismiss}>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader className="text-center pb-2">
           <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-primary to-orange-400">

src/components/layout/AppHeader.tsx

@@ -13,7 +13,7 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useApp } from "@/lib/store";
 import { useNavigate } from "react-router-dom";
 import { Menu, Settings, LogOut, User, Sparkles } from "lucide-react";
-import { track, Events } from "@/lib/events";
+import { track, EVENTS } from "@/lib/events";
 
 interface AppHeaderProps {
   onMenuClick?: () => void;
@@ -26,8 +26,7 @@ export function AppHeader({ onMenuClick, showMenuButton = false }: AppHeaderProp
   const today = format(new Date(), "EEEE, MMMM d");
 
   const handleSignOut = () => {
-    // TODO: Analytics - sign out
-    track(Events.SIGN_OUT);
+    track(EVENTS.AUTH_SIGNOUT);
     signOut();
     navigate("/auth/sign-in");
   };

src/lib/analytics/events.ts

@@ -0,0 +1,76 @@
+/**
+ * Analytics event names
+ * 
+ * This file contains all event names as typed string literals.
+ * Use these constants when calling track() to ensure consistency.
+ */
+
+export const EVENTS = {
+  // Auth events
+  AUTH_SIGNIN_VIEWED: 'auth_signin_viewed',
+  AUTH_SIGNIN_SUBMITTED: 'auth_signin_submitted',
+  AUTH_SIGNIN_SUCCEEDED: 'auth_signin_succeeded',
+  AUTH_SIGNIN_FAILED: 'auth_signin_failed',
+  AUTH_SIGNUP_VIEWED: 'auth_signup_viewed',
+  AUTH_SIGNUP_SUBMITTED: 'auth_signup_submitted',
+  AUTH_SIGNUP_SUCCEEDED: 'auth_signup_succeeded',
+  AUTH_SIGNOUT: 'auth_signout',
+  
+  // Post-auth routing
+  ROUTED_TO_ONBOARDING: 'routed_to_onboarding',
+  ROUTED_TO_HOME: 'routed_to_home',
+  
+  // Onboarding events
+  ONBOARDING_STEP_VIEWED: 'onboarding_step_viewed',
+  ONBOARDING_STEP_COMPLETED: 'onboarding_step_completed',
+  ONBOARDING_GOAL_SELECTED: 'onboarding_goal_selected',
+  ONBOARDING_HABIT_TOGGLED: 'onboarding_habit_toggled',
+  ONBOARDING_REMINDER_SET: 'onboarding_reminder_set',
+  ONBOARDING_REMINDER_SKIPPED: 'onboarding_reminder_skipped',
+  NOTIFICATION_PERMISSION_PROMPT_ACCEPTED: 'notification_permission_prompt_accepted',
+  NOTIFICATION_PERMISSION_PROMPT_DISMISSED: 'notification_permission_prompt_dismissed',
+  ONBOARDING_COMPLETED: 'onboarding_completed',
+  
+  // Home events
+  HOME_VIEWED: 'home_viewed',
+  HOME_CTA_LOG_CLICKED: 'home_cta_log_clicked',
+  
+  // Log events
+  LOG_TODAY_VIEWED: 'log_today_viewed',
+  HABIT_LOG_TOGGLED: 'habit_log_toggled',
+  HABIT_LOG_VALUE_CHANGED: 'habit_log_value_changed',
+  DAY_COMPLETED_CLICKED: 'day_completed_clicked',
+  DAY_COMPLETED_SUCCEEDED: 'day_completed_succeeded',
+  DAY_COMPLETION_DIALOG_SHOWN: 'day_completion_dialog_shown',
+  DAY_COMPLETION_VIEW_INSIGHTS_CLICKED: 'day_completion_view_insights_clicked',
+  
+  // Habits events
+  HABITS_VIEWED: 'habits_viewed',
+  HABIT_ADD_CLICKED: 'habit_add_clicked',
+  HABIT_ADD_DIALOG_OPENED: 'habit_add_dialog_opened',
+  HABIT_CREATED: 'habit_created',
+  HABIT_UPDATED: 'habit_updated',
+  HABIT_ARCHIVED: 'habit_archived',
+  HABIT_REACTIVATED: 'habit_reactivated',
+  
+  // Insights events
+  INSIGHTS_VIEWED: 'insights_viewed',
+  INSIGHTS_WEEK_CHANGED: 'insights_week_changed',
+  PRO_INSIGHTS_LOCKED_VIEWED: 'pro_insights_locked_viewed',
+  
+  // Settings events
+  SETTINGS_VIEWED: 'settings_viewed',
+  PLAN_SECTION_VIEWED: 'plan_section_viewed',
+  DEMO_RESET_CLICKED: 'demo_reset_clicked',
+  DEMO_RESET_CONFIRMED: 'demo_reset_confirmed',
+  
+  // Paywall events
+  PAYWALL_TRIGGERED: 'paywall_triggered',
+  PAYWALL_VIEWED: 'paywall_viewed',
+  UPGRADE_CLICKED: 'upgrade_clicked',
+  UPGRADE_SUCCEEDED: 'upgrade_succeeded',
+  PAYWALL_DISMISSED: 'paywall_dismissed',
+} as const;
+
+// Export type for TypeScript users
+export type EventName = typeof EVENTS[keyof typeof EVENTS];

src/lib/analytics/track.ts

@@ -0,0 +1,120 @@
+/**
+ * Analytics tracking module
+ * 
+ * TODO: Journium SDK integration
+ * When ready to integrate Journium SDK:
+ * 1. Replace console.log with journium.track(eventName, properties)
+ * 2. Initialize Journium SDK in main.tsx or App.tsx
+ * 3. Remove the feature flag check if Journium handles it
+ */
+
+// Feature flag key in localStorage
+const ANALYTICS_ENABLED_KEY = 'analyticsEnabled';
+const SESSION_ID_KEY = 'sessionId';
+
+// Generate a session ID for this tab session
+function getSessionId(): string {
+  let sessionId = sessionStorage.getItem(SESSION_ID_KEY);
+  if (!sessionId) {
+    sessionId = `session_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+    sessionStorage.setItem(SESSION_ID_KEY, sessionId);
+  }
+  return sessionId;
+}
+
+// Check if analytics is enabled
+function isAnalyticsEnabled(): boolean {
+  const enabled = localStorage.getItem(ANALYTICS_ENABLED_KEY);
+  // Default to true if not set (first time)
+  if (enabled === null) {
+    localStorage.setItem(ANALYTICS_ENABLED_KEY, 'true');
+    return true;
+  }
+  return enabled === 'true';
+}
+
+// Get device type
+function getDevice(): 'mobile' | 'desktop' {
+  return window.innerWidth < 768 ? 'mobile' : 'desktop';
+}
+
+// Get user ID from localStorage (if logged in)
+function getUserId(): string | null {
+  try {
+    const userStr = localStorage.getItem('looply_user');
+    if (userStr) {
+      const user = JSON.parse(userStr);
+      return user.id || null;
+    }
+  } catch (e) {
+    // Ignore parse errors
+  }
+  return null;
+}
+
+// Get user plan from localStorage
+function getUserPlan(): 'free' | 'pro' | null {
+  try {
+    const userStr = localStorage.getItem('looply_user');
+    if (userStr) {
+      const user = JSON.parse(userStr);
+      return user.plan || null;
+    }
+  } catch (e) {
+    // Ignore parse errors
+  }
+  return null;
+}
+
+/**
+ * Track an analytics event
+ * 
+ * @param eventName - The name of the event to track
+ * @param props - Optional properties to attach to the event
+ */
+export function track(eventName: string, props?: Record<string, any>): void {
+  // Check feature flag
+  if (!isAnalyticsEnabled()) {
+    return;
+  }
+
+  // Build common properties
+  const commonProps = {
+    ts: new Date().toISOString(),
+    path: window.location.pathname,
+    userId: getUserId(),
+    plan: getUserPlan(),
+    device: getDevice(),
+    sessionId: getSessionId(),
+  };
+
+  // Merge with provided properties
+  const allProps = {
+    ...commonProps,
+    ...props,
+  };
+
+  // TODO: replace console.log with journium.track(eventName, allProps)
+  console.log('[track]', eventName, allProps);
+}
+
+/**
+ * Enable or disable analytics tracking
+ */
+export function setAnalyticsEnabled(enabled: boolean): void {
+  localStorage.setItem(ANALYTICS_ENABLED_KEY, enabled ? 'true' : 'false');
+}
+
+/**
+ * Check if analytics is currently enabled
+ */
+export function getAnalyticsEnabled(): boolean {
+  return isAnalyticsEnabled();
+}
+
+/**
+ * Get the current session ID
+ */
+export function getCurrentSessionId(): string {
+  return getSessionId();
+}

src/lib/events.ts

@@ -1,45 +1,8 @@
 /**
- * Analytics events placeholder
- * Replace with your actual analytics implementation (e.g., Mixpanel, Amplitude, Segment)
+ * Analytics events - Re-exports from analytics module
+ * This file provides backward compatibility with existing imports
  */
 
-type EventProperties = Record<string, unknown>;
-
-export function track(eventName: string, properties?: EventProperties): void {
-  // TODO: Implement actual analytics tracking
-  console.log(`[Analytics] ${eventName}`, properties);
-}
-
-// Event name constants for consistency
-export const Events = {
-  // Auth events
-  SIGN_IN: 'sign_in',
-  SIGN_UP: 'sign_up',
-  SIGN_OUT: 'sign_out',
-  
-  // Onboarding events
-  ONBOARDING_STARTED: 'onboarding_started',
-  ONBOARDING_STEP_VIEWED: 'onboarding_step_viewed',
-  ONBOARDING_GOAL_SELECTED: 'onboarding_goal_selected',
-  ONBOARDING_HABITS_SELECTED: 'onboarding_habits_selected',
-  ONBOARDING_COMPLETED: 'onboarding_completed',
-  
-  // Notification events
-  NOTIFICATION_PERMISSION_ALLOWED: 'notification_permission_allowed',
-  NOTIFICATION_PERMISSION_DENIED: 'notification_permission_denied',
-  
-  // Habit events
-  HABIT_CREATED: 'habit_created',
-  HABIT_UPDATED: 'habit_updated',
-  HABIT_ARCHIVED: 'habit_archived',
-  HABIT_LOGGED: 'habit_logged',
-  
-  // Paywall events
-  PAYWALL_SHOWN: 'paywall_shown',
-  PAYWALL_UPGRADE_CLICKED: 'paywall_upgrade_clicked',
-  UPGRADE_SUCCESS: 'upgrade_success',
-  
-  // General events
-  PAGE_VIEW: 'page_view',
-  DEMO_DATA_RESET: 'demo_data_reset',
-} as const;
+// Re-export everything from the new analytics module
+export { track, setAnalyticsEnabled, getAnalyticsEnabled, getCurrentSessionId } from './analytics/track';
+export { EVENTS, EVENTS as Events } from './analytics/events';