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/app/[locale]/layout.tsx

@@ -3,6 +3,8 @@ import { NextIntlClientProvider } from "next-intl";
 import { getMessages, setRequestLocale } from "next-intl/server";
 import { SUPPORTED_LOCALES, DEFAULT_LOCALE, isValidLocale } from "@/lib/i18n/locales";
 import { OpenPanelComponent } from "@openpanel/nextjs";
+import Script from "next/script";
+import { RYBBIT_HOST, RYBBIT_SITE_ID } from "@/lib/services/RybbitService";
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
 
@@ -46,13 +48,18 @@ export default async function LocaleLayout({
 
   return (
     <>
-        <OpenPanelComponent
-          clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
-          trackScreenViews={true}
-          trackOutgoingLinks={true}
-          apiUrl="https://op.nodecrew.me/api"
-          scriptUrl="https://op.nodecrew.me/op1.js"
-        />
+      <OpenPanelComponent
+        clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
+        trackScreenViews={true}
+        trackOutgoingLinks={true}
+        apiUrl="https://op.nodecrew.me/api"
+        scriptUrl="https://op.nodecrew.me/op1.js"
+      />
+      <Script
+        src={`${RYBBIT_HOST}/api/script.js`}
+        data-site-id={RYBBIT_SITE_ID}
+        strategy="afterInteractive"
+      />
       <NextIntlClientProvider messages={messages}>
         {children}
       </NextIntlClientProvider>