use latest openpanel/nextjs package (1.0.0)

apps/dashboard/package.json

@@ -20,7 +20,7 @@
     "@openpanel/common": "workspace:^",
     "@openpanel/constants": "workspace:^",
     "@openpanel/db": "workspace:^",
-    "@openpanel/nextjs": "0.0.8-beta",
+    "@openpanel/nextjs": "1.0.0",
     "@openpanel/queue": "workspace:^",
     "@openpanel/sdk-info": "workspace:^",
     "@openpanel/validation": "workspace:^",

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/side-effects.tsx

@@ -5,9 +5,10 @@ import { pushModal, useOnPushModal } from '@/modals';
 import { useUser } from '@clerk/nextjs';
 import { differenceInDays } from 'date-fns';
 
-import { trackEvent } from '@openpanel/nextjs';
+import { useOpenPanel } from '@openpanel/nextjs';
 
 export default function SideEffects() {
+  const op = useOpenPanel();
   const { user } = useUser();
   const accountAgeInDays = differenceInDays(
     new Date(),
@@ -30,7 +31,7 @@ export default function SideEffects() {
   useEffect(() => {
     if (showTestimonial) {
       pushModal('Testimonial');
-      trackEvent('testimonials_shown');
+      op.track('testimonials_shown');
     }
   }, [showTestimonial]);
 

apps/dashboard/src/app/providers.tsx

@@ -14,7 +14,7 @@ import { Provider as ReduxProvider } from 'react-redux';
 import { Toaster } from 'sonner';
 import superjson from 'superjson';
 
-import { OpenpanelProvider } from '@openpanel/nextjs';
+import { OpenPanelComponent } from '@openpanel/nextjs';
 
 function AllProviders({ children }: { children: React.ReactNode }) {
   const { userId, getToken } = useAuth();
@@ -63,9 +63,10 @@ function AllProviders({ children }: { children: React.ReactNode }) {
       disableTransitionOnChange
     >
       {process.env.NEXT_PUBLIC_OP_CLIENT_ID && (
-        <OpenpanelProvider
+        <OpenPanelComponent
           clientId={process.env.NEXT_PUBLIC_OP_CLIENT_ID}
           profileId={userId || undefined}
+          waitForProfile
           trackScreenViews
           trackOutgoingLinks
         />

apps/dashboard/src/modals/Testimonial.tsx

@@ -2,13 +2,12 @@ import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { useAppParams } from '@/hooks/useAppParams';
 import { api } from '@/trpc/client';
-import { useUser } from '@clerk/nextjs';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-import { trackEvent } from '@openpanel/nextjs';
+import { useOpenPanel } from '@openpanel/nextjs';
 
 import { popModal } from '.';
 import { ModalContent } from './Modal/Container';
@@ -20,6 +19,7 @@ const validator = z.object({
 type IForm = z.infer<typeof validator>;
 
 const Testimonial = () => {
+  const op = useOpenPanel();
   const mutation = api.ticket.create.useMutation();
   const params = useAppParams();
   const form = useForm<IForm>({
@@ -27,7 +27,7 @@ const Testimonial = () => {
   });
   return (
     <ModalContent className="p-0">
-      <div className="bg-def-100 w-full rounded-t-lg border-b border-border p-4">
+      <div className="w-full rounded-t-lg border-b border-border bg-def-100 p-4">
         <h1 className="mb-2 text-2xl font-bold">Review time 🫶</h1>
         <p className="mb-2">
           Thank you so much for using Openpanel — it truly means a great deal to
@@ -51,7 +51,7 @@ const Testimonial = () => {
               },
             });
             toast.success('Thanks for your feedback 🚀');
-            trackEvent('testimonials_sent');
+            op.track('testimonials_sent');
             popModal();
           } catch (e) {
             toast.error('Something went wrong. Please try again later.');

apps/public/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@openpanel/db": "workspace:*",
-    "@openpanel/nextjs": "0.0.6-beta",
+    "@openpanel/nextjs": "1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",

apps/public/src/app/layout.tsx

@@ -2,15 +2,13 @@ import { cn } from '@/utils/cn';
 import type { Metadata } from 'next';
 import { Bricolage_Grotesque, Inter } from 'next/font/google';
 
-import { OpenpanelProvider } from '@openpanel/nextjs';
+import { OpenPanelComponent } from '@openpanel/nextjs';
 
 import Footer from './footer';
 import { defaultMeta } from './meta';
 
 import '@/styles/globals.css';
 
-import Script from 'next/script';
-
 import { Navbar } from './navbar';
 
 export const metadata: Metadata = {
@@ -52,14 +50,11 @@ export default function RootLayout({
         <Footer />
       </body>
 
-      <Script src={'https://openpanel.dev/op1.js'} async defer />
+      <OpenPanelComponent
-      <Script
+        clientId="301c6dc1-424c-4bc3-9886-a8beab09b615"
-        id="op1"
+        trackAttributes
-        dangerouslySetInnerHTML={{
+        trackScreenViews
-          __html: `window.op = window.op || function(...args) {(window.op.q = window.op.q || []).push(args)};
+        trackOutgoingLinks
-          window.op('init', {"clientId":"301c6dc1-424c-4bc3-9886-a8beab09b615","sdk":"nextjs","sdkVersion":"1.0.0-beta","trackAttributes":true,"trackScreenViews":true,"trackOutgoingLinks":true});
-          `,
-        }}
       />
     </html>
   );

packages/cli/src/importer/importer.ts

@@ -237,6 +237,8 @@ function createEventObject(event: IMixpanelEvent): IImportedEvent {
     duration: 0,
     device: event.properties.$current_url ? '' : 'server',
     brand: '',
+    sdk_name: '',
+    sdk_version: '',
   };
 }
 

pnpm-lock.yaml

@@ -192,8 +192,8 @@ importers:
         specifier: workspace:^
         version: link:../../packages/db
       '@openpanel/nextjs':
-        specifier: 0.0.8-beta
+        specifier: 1.0.0
-        version: 0.0.8-beta(next@14.2.1)(react-dom@18.2.0)(react@18.2.0)
+        version: link:../../packages/sdks/nextjs
       '@openpanel/queue':
         specifier: workspace:^
         version: link:../../packages/queue
@@ -590,8 +590,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/db
       '@openpanel/nextjs':
-        specifier: 0.0.6-beta
+        specifier: 1.0.0
-        version: 0.0.6-beta(next@14.2.1)(react-dom@18.2.0)(react@18.2.0)
+        version: link:../../packages/sdks/nextjs
       '@radix-ui/react-alert-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
@@ -1168,7 +1168,7 @@ importers:
   packages/sdks/express:
     dependencies:
       '@openpanel/sdk':
-        specifier: 0.0.9-beta
+        specifier: 1.0.0
         version: link:../sdk
       express:
         specifier: ^3.0.0 || ^4.0.0
@@ -1208,7 +1208,7 @@ importers:
   packages/sdks/nextjs:
     dependencies:
       '@openpanel/web':
-        specifier: 0.0.9-beta
+        specifier: 1.0.0
         version: link:../web
       next:
         specifier: ^12.0.0 || ^13.0.0 || ^14.0.0
@@ -1248,7 +1248,7 @@ importers:
   packages/sdks/react-native:
     dependencies:
       '@openpanel/sdk':
-        specifier: 0.0.9-beta
+        specifier: 1.0.0
         version: link:../sdk
       expo-application:
         specifier: ^5
@@ -1315,7 +1315,7 @@ importers:
   packages/sdks/web:
     dependencies:
       '@openpanel/sdk':
-        specifier: 0.0.9-beta
+        specifier: 1.0.0
         version: link:../sdk
     devDependencies:
       '@openpanel/eslint-config':
@@ -4895,52 +4895,6 @@ packages:
       rimraf: 3.0.2
     dev: false
 
-  /@openpanel/nextjs@0.0.6-beta(next@14.2.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-/QH1MBpV3txVX+gHKAWqjAo17ThR4NtlDHnSt9g/A3Px2VVCIwENBAXKiY5zBd/NV5EGz0hHAHaPeHd41Ix64A==}
-    peerDependencies:
-      next: ^12.0.0 || ^13.0.0 || ^14.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@openpanel/web': 0.0.6-beta
-      next: 14.2.1(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
-  /@openpanel/nextjs@0.0.8-beta(next@14.2.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-rSPTKtBOEJ6ewYcJuLdAlGv9YO7FfY6dR8kfJ9k9mMtIJjmwRbtGqXMHRhrGhviQ7p2sRPADG/BaNwEoZKi3Cw==}
-    peerDependencies:
-      next: ^12.0.0 || ^13.0.0 || ^14.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@openpanel/web': 0.0.8-beta
-      next: 14.2.1(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
-  /@openpanel/sdk@0.0.6-beta:
-    resolution: {integrity: sha512-siUvMTgaHb7ZT9BVIBPIhEhPz5PaBQLCik9SuibwufsO6QWBz7nYqkMMPtqcuAjGFq6V7LcHWBl+Wq7NGZ8obA==}
-    dev: false
-
-  /@openpanel/sdk@0.0.8-beta:
-    resolution: {integrity: sha512-Cs23tPoQqZLiG3A9C3CTPzyhurX+Q/mScaaK79/Kuvcv4vZjqUztLtLqxRx/zxeXYVbanzwR3blJCeTmABexKQ==}
-    dev: false
-
-  /@openpanel/web@0.0.6-beta:
-    resolution: {integrity: sha512-7FwtbBWb8XqIUZ4DjdzMFsEWZo85RDhKkfgC/m6bV71QlQ3iMr+c/XuH6dO3bL7O+q0uFodD9IPksyF/u+P+KA==}
-    dependencies:
-      '@openpanel/sdk': 0.0.6-beta
-    dev: false
-
-  /@openpanel/web@0.0.8-beta:
-    resolution: {integrity: sha512-7xwG4QhXBan4r6SH+q7MrVZPS87r6UvUGHsu7dCIWDhTex+lW3CeA0NEHRvUSfH6Z+oeQ7xstVczEb0h/VikdA==}
-    dependencies:
-      '@openpanel/sdk': 0.0.8-beta
-    dev: false
-
   /@opentelemetry/api-logs@0.50.0:
     resolution: {integrity: sha512-JdZuKrhOYggqOpUljAq4WWNi5nB10PmgoF0y2CvedLGXd0kSawb/UBnWT8gg1ND3bHCNHStAIVT0ELlxJJRqrA==}
     engines: {node: '>=14'}