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

apps/dashboard/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/utils/cn"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

apps/dashboard/src/modals/Testimonial.tsx

@@ -0,0 +1,78 @@
+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 { popModal } from '.';
+import { ModalContent } from './Modal/Container';
+
+const validator = z.object({
+  body: z.string().min(3),
+});
+
+type IForm = z.infer<typeof validator>;
+
+const Testimonial = () => {
+  const mutation = api.ticket.create.useMutation();
+  const params = useAppParams();
+  const form = useForm<IForm>({
+    resolver: zodResolver(validator),
+  });
+  return (
+    <ModalContent className="p-0">
+      <div className="w-full rounded-t-lg border-b border-border bg-secondary 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
+          me! If you&apos;re enjoying your experience, I&apos;d be thrilled if
+          you could leave a quick review. 😇
+        </p>
+        <p>
+          If you have any feedback or suggestions, I&apos;d love to hear them as
+          well! 🚀
+        </p>
+      </div>
+      <form
+        className="p-4"
+        onSubmit={form.handleSubmit(async ({ body }) => {
+          try {
+            await mutation.mutateAsync({
+              subject: 'New testimonial',
+              body,
+              meta: {
+                ...params,
+              },
+            });
+            toast.success('Thanks for your feedback 🚀');
+            trackEvent('testimonials_sent');
+            popModal();
+          } catch (e) {
+            toast.error('Something went wrong. Please try again later.');
+          }
+        })}
+      >
+        <Textarea
+          placeholder="Type your review here."
+          {...form.register('body')}
+        />
+        <div className="mt-4 flex justify-between gap-2">
+          <Button type="button" variant="secondary" onClick={() => popModal()}>
+            Maybe later
+          </Button>
+          <Button type="submit" loading={form.formState.isSubmitting}>
+            Send it
+          </Button>
+        </div>
+      </form>
+    </ModalContent>
+  );
+};
+
+export default Testimonial;

apps/dashboard/src/modals/index.tsx

@@ -65,6 +65,9 @@ const modals = {
   OverviewChartDetails: dynamic(() => import('./OverviewChartDetails'), {
     loading: Loading,
   }),
+  Testimonial: dynamic(() => import('./Testimonial'), {
+    loading: Loading,
+  }),
 };
 
 export const {