use latest openpanel/nextjs package (1.0.0)

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.');