feat: integrate Rybbit analytics alongside OpenPanel

- Add RybbitService for tracking e-commerce events
- Update useAnalytics hook to track with both OpenPanel and Rybbit
- Add Rybbit script to layout for page view tracking
- Track all applicable store events: product views, cart, checkout, orders, search, etc.

src/lib/analytics.ts

@@ -2,11 +2,119 @@
 
 import { useOpenPanel } from "@openpanel/nextjs";
 import { useCallback } from "react";
+import {
+  trackRybbitProductView,
+  trackRybbitAddToCart,
+  trackRybbitRemoveFromCart,
+  trackRybbitCheckoutStarted,
+  trackRybbitCheckoutStep,
+  trackRybbitOrderCompleted,
+  trackRybbitSearch,
+  trackRybbitExternalLink,
+  trackRybbitCartView,
+  trackRybbitWishlistAdd,
+  trackRybbitUserLogin,
+  trackRybbitUserRegister,
+} from "@/lib/services/RybbitService";
 
 export function useAnalytics() {
   const op = useOpenPanel();
 
-  // Client-side tracking for user behavior
+  // Helper to track with both OpenPanel and Rybbit
+  const trackDual = useCallback((
+    eventName: string, 
+    openPanelData: Record<string, any>
+  ) => {
+    // OpenPanel tracking
+    try {
+      op.track(eventName, openPanelData);
+    } catch (e) {
+      console.error("[OpenPanel] Tracking error:", e);
+    }
+
+    // Rybbit tracking (fire-and-forget)
+    try {
+      switch (eventName) {
+        case "product_viewed":
+          trackRybbitProductView({
+            id: openPanelData.product_id,
+            name: openPanelData.product_name,
+            price: openPanelData.price,
+            currency: openPanelData.currency,
+            category: openPanelData.category,
+          });
+          break;
+        case "add_to_cart":
+          trackRybbitAddToCart({
+            id: openPanelData.product_id,
+            name: openPanelData.product_name,
+            price: openPanelData.price,
+            currency: openPanelData.currency,
+            quantity: openPanelData.quantity,
+            variant: openPanelData.variant,
+          });
+          break;
+        case "remove_from_cart":
+          trackRybbitRemoveFromCart({
+            id: openPanelData.product_id,
+            name: openPanelData.product_name,
+            quantity: openPanelData.quantity,
+          });
+          break;
+        case "cart_view":
+          trackRybbitCartView({
+            total: openPanelData.cart_total,
+            currency: openPanelData.currency,
+            item_count: openPanelData.item_count,
+          });
+          break;
+        case "checkout_started":
+          trackRybbitCheckoutStarted({
+            total: openPanelData.cart_total,
+            currency: openPanelData.currency,
+            item_count: openPanelData.item_count,
+            items: openPanelData.items,
+          });
+          break;
+        case "checkout_step":
+          trackRybbitCheckoutStep(openPanelData.step, openPanelData);
+          break;
+        case "order_completed":
+          trackRybbitOrderCompleted({
+            order_id: openPanelData.order_id,
+            order_number: openPanelData.order_number,
+            total: openPanelData.total,
+            currency: openPanelData.currency,
+            item_count: openPanelData.item_count,
+            shipping_cost: openPanelData.shipping_cost,
+            customer_email: openPanelData.customer_email,
+            payment_method: openPanelData.payment_method,
+          });
+          break;
+        case "search":
+          trackRybbitSearch(openPanelData.query, openPanelData.results_count);
+          break;
+        case "external_link_click":
+          trackRybbitExternalLink(openPanelData.url, openPanelData.label);
+          break;
+        case "wishlist_add":
+          trackRybbitWishlistAdd({
+            id: openPanelData.product_id,
+            name: openPanelData.product_name,
+          });
+          break;
+        case "user_login":
+          trackRybbitUserLogin(openPanelData.method);
+          break;
+        case "user_register":
+          trackRybbitUserRegister(openPanelData.method);
+          break;
+      }
+    } catch (e) {
+      console.warn("[Rybbit] Tracking error:", e);
+    }
+  }, [op]);
+
   const trackProductView = useCallback((product: {
     id: string;
     name: string;
@@ -14,19 +122,15 @@ export function useAnalytics() {
     currency: string;
     category?: string;
   }) => {
-    try {
-      op.track("product_viewed", {
-        product_id: product.id,
-        product_name: product.name,
-        price: product.price,
-        currency: product.currency,
-        category: product.category,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] Product view error:", e);
-    }
-  }, [op]);
+    trackDual("product_viewed", {
+      product_id: product.id,
+      product_name: product.name,
+      price: product.price,
+      currency: product.currency,
+      category: product.category,
+      source: "client",
+    });
+  }, [trackDual]);
 
   const trackAddToCart = useCallback((product: {
     id: string;
@@ -36,37 +140,42 @@ export function useAnalytics() {
     quantity: number;
     variant?: string;
   }) => {
-    try {
-      op.track("add_to_cart", {
-        product_id: product.id,
-        product_name: product.name,
-        price: product.price,
-        currency: product.currency,
-        quantity: product.quantity,
-        variant: product.variant,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] Add to cart error:", e);
-    }
-  }, [op]);
+    trackDual("add_to_cart", {
+      product_id: product.id,
+      product_name: product.name,
+      price: product.price,
+      currency: product.currency,
+      quantity: product.quantity,
+      variant: product.variant,
+      source: "client",
+    });
+  }, [trackDual]);
 
   const trackRemoveFromCart = useCallback((product: {
     id: string;
     name: string;
     quantity: number;
   }) => {
-    try {
-      op.track("remove_from_cart", {
-        product_id: product.id,
-        product_name: product.name,
-        quantity: product.quantity,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] Remove from cart error:", e);
-    }
-  }, [op]);
+    trackDual("remove_from_cart", {
+      product_id: product.id,
+      product_name: product.name,
+      quantity: product.quantity,
+      source: "client",
+    });
+  }, [trackDual]);
+
+  const trackCartView = useCallback((cart: {
+    total: number;
+    currency: string;
+    item_count: number;
+  }) => {
+    trackDual("cart_view", {
+      cart_total: cart.total,
+      currency: cart.currency,
+      item_count: cart.item_count,
+      source: "client",
+    });
+  }, [trackDual]);
 
   const trackCheckoutStarted = useCallback((cart: {
     total: number;
@@ -79,36 +188,23 @@ export function useAnalytics() {
       price: number;
     }>;
   }) => {
-    try {
-      op.track("checkout_started", {
-        cart_total: cart.total,
-        currency: cart.currency,
-        item_count: cart.item_count,
-        items: cart.items,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] Checkout started error:", e);
-    }
-  }, [op]);
+    trackDual("checkout_started", {
+      cart_total: cart.total,
+      currency: cart.currency,
+      item_count: cart.item_count,
+      items: cart.items,
+      source: "client",
+    });
+  }, [trackDual]);
 
   const trackCheckoutStep = useCallback((step: string, data?: Record<string, unknown>) => {
-    try {
-      op.track("checkout_step", {
-        step,
-        ...data,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] Checkout step error:", e);
-    }
-  }, [op]);
+    trackDual("checkout_step", {
+      step,
+      ...data,
+      source: "client",
+    });
+  }, [trackDual]);
 
-  /**
-   * DUAL TRACKING: Order completion
-   * 1. Track client-side (immediate, captures user session)
-   * 2. Call server-side API (reliable, can't be blocked)
-   */
   const trackOrderCompleted = useCallback(async (order: {
     order_id: string;
     order_number: string;
@@ -119,37 +215,34 @@ export function useAnalytics() {
     customer_email?: string;
     payment_method?: string;
   }) => {
-    console.log("[Dual Analytics] Tracking order:", order.order_number, "Total:", order.total);
+    console.log("[Analytics] Tracking order:", order.order_number);
 
-    // CLIENT-SIDE: Track immediately for user session data
+    // Track with both OpenPanel and Rybbit
+    trackDual("order_completed", {
+      order_id: order.order_id,
+      order_number: order.order_number,
+      total: order.total,
+      currency: order.currency,
+      item_count: order.item_count,
+      shipping_cost: order.shipping_cost,
+      customer_email: order.customer_email,
+      payment_method: order.payment_method,
+      source: "client",
+    });
+
+    // OpenPanel revenue tracking
     try {
-      op.track("order_completed", {
-        order_id: order.order_id,
-        order_number: order.order_number,
-        total: order.total,
-        currency: order.currency,
-        item_count: order.item_count,
-        shipping_cost: order.shipping_cost,
-        customer_email: order.customer_email,
-        payment_method: order.payment_method,
-        source: "client",
-      });
-
       op.revenue(order.total, {
         currency: order.currency,
         transaction_id: order.order_number,
         source: "client",
       });
-
-      console.log("[Client Analytics] Order tracked");
     } catch (e) {
-      console.error("[Client Analytics] Order tracking error:", e);
+      console.error("[OpenPanel] Revenue tracking error:", e);
     }
 
-    // SERVER-SIDE: Call API for reliable tracking
+    // Server-side tracking for reliability
     try {
-      console.log("[Server Analytics] Calling server-side tracking API...");
-      
       const response = await fetch("/api/analytics/track-order", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -165,39 +258,54 @@ export function useAnalytics() {
         }),
       });
 
-      if (response.ok) {
-        console.log("[Server Analytics] Order tracked successfully");
-      } else {
+      if (!response.ok) {
         console.error("[Server Analytics] Failed:", await response.text());
       }
     } catch (e) {
       console.error("[Server Analytics] API call failed:", e);
     }
-  }, [op]);
+  }, [op, trackDual]);
 
   const trackSearch = useCallback((query: string, results_count: number) => {
-    try {
-      op.track("search", {
-        query,
-        results_count,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] Search error:", e);
-    }
-  }, [op]);
+     trackDual("search", {
+       query,
+       results_count,
+       source: "client",
+     });
+  }, [trackDual]);
 
   const trackExternalLink = useCallback((url: string, label?: string) => {
-    try {
-      op.track("external_link_click", {
-        url,
-        label,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[Client Analytics] External link error:", e);
-    }
-  }, [op]);
+    trackDual("external_link_click", {
+      url,
+      label,
+      source: "client",
+    });
+  }, [trackDual]);
+
+  const trackWishlistAdd = useCallback((product: {
+    id: string;
+    name: string;
+  }) => {
+    trackDual("wishlist_add", {
+      product_id: product.id,
+      product_name: product.name,
+      source: "client",
+    });
+  }, [trackDual]);
+
+  const trackUserLogin = useCallback((method: string) => {
+    trackDual("user_login", {
+      method,
+      source: "client",
+    });
+  }, [trackDual]);
+
+  const trackUserRegister = useCallback((method: string) => {
+    trackDual("user_register", {
+      method,
+      source: "client",
+    });
+  }, [trackDual]);
 
   const identifyUser = useCallback((user: {
     profileId: string;
@@ -213,7 +321,7 @@ export function useAnalytics() {
         email: user.email,
       });
     } catch (e) {
-      console.error("[Client Analytics] Identify error:", e);
+      console.error("[OpenPanel] Identify error:", e);
     }
   }, [op]);
 
@@ -221,11 +329,15 @@ export function useAnalytics() {
     trackProductView,
     trackAddToCart,
     trackRemoveFromCart,
+    trackCartView,
     trackCheckoutStarted,
     trackCheckoutStep,
     trackOrderCompleted,
     trackSearch,
     trackExternalLink,
+    trackWishlistAdd,
+    trackUserLogin,
+    trackUserRegister,
     identifyUser,
   };
 }