add seventy seven

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx

@@ -74,6 +74,7 @@ export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
     if (hasProjectId) {
       user?.update({
         unsafeMetadata: {
+          ...user.unsafeMetadata,
           projectId: params.projectId,
         },
       });

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx

@@ -7,6 +7,7 @@ import {
 } from '@openpanel/db';
 
 import { LayoutSidebar } from './layout-sidebar';
+import SideEffects from './side-effects';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -48,6 +49,7 @@ export default async function AppLayout({
         {...{ organizationSlug, projectId, organizations, dashboards }}
       />
       <div className="transition-all lg:pl-72">{children}</div>
+      <SideEffects />
     </div>
   );
 }

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect } from 'react';
+import { pushModal, useOnPushModal } from '@/modals';
+import { useUser } from '@clerk/nextjs';
+import { differenceInDays } from 'date-fns';
+
+import { trackEvent } from '@openpanel/nextjs';
+
+export default function SideEffects() {
+  const { user } = useUser();
+  const accountAgeInDays = differenceInDays(
+    new Date(),
+    user?.createdAt || new Date()
+  );
+  useOnPushModal('Testimonial', (open) => {
+    if (!open) {
+      user?.update({
+        unsafeMetadata: {
+          ...user.unsafeMetadata,
+          testimonial: new Date().toISOString(),
+        },
+      });
+    }
+  });
+
+  const showTestimonial =
+    user && !user.unsafeMetadata.testimonial && accountAgeInDays > 7;
+
+  useEffect(() => {
+    if (showTestimonial) {
+      pushModal('Testimonial');
+      trackEvent('testimonials_shown');
+    }
+  }, [showTestimonial]);
+
+  return null;
+}

apps/dashboard/src/app/providers.tsx

@@ -8,7 +8,7 @@ import makeStore from '@/redux';
 import { api } from '@/trpc/client';
 import { ClerkProvider, useAuth } from '@clerk/nextjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpLink, unstable_httpBatchStreamLink } from '@trpc/client';
+import { unstable_httpBatchStreamLink } from '@trpc/client';
 import { ThemeProvider } from 'next-themes';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Toaster } from 'sonner';