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",
@@ -74,4 +74,4 @@
     ]
   },
   "prettier": "@openpanel/prettier-config"
-}
+}

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 />
-      <Script
-        id="op1"
-        dangerouslySetInnerHTML={{
-          __html: `window.op = window.op || function(...args) {(window.op.q = window.op.q || []).push(args)};
-          window.op('init', {"clientId":"301c6dc1-424c-4bc3-9886-a8beab09b615","sdk":"nextjs","sdkVersion":"1.0.0-beta","trackAttributes":true,"trackScreenViews":true,"trackOutgoingLinks":true});
-          `,
-        }}
+      <OpenPanelComponent
+        clientId="301c6dc1-424c-4bc3-9886-a8beab09b615"
+        trackAttributes
+        trackScreenViews
+        trackOutgoingLinks
       />
     </html>
   );