feat: prefill contact form (#860)

openstatusHQ · Jun 3, 2024 · 22fca23 · 22fca23
1 parent 39b00b0
commit 22fca23
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/apps/web/src/app/app/layout.tsx b/apps/web/src/app/app/layout.tsx
@@ -12,8 +12,10 @@ export default function AuthLayout({
   return (
     <PHProvider>
       <PostHogPageview />
-      <SessionProvider>{children}</SessionProvider>
-      <Bubble />
+      <SessionProvider>
+        {children}
+        <Bubble />
+      </SessionProvider>
     </PHProvider>
   );
 }
diff --git a/apps/web/src/components/support/bubble.tsx b/apps/web/src/components/support/bubble.tsx
@@ -11,17 +11,18 @@ import {
 } from "@openstatus/ui";
 
 import { ContactForm } from "./contact-form";
+import { useSession } from "next-auth/react";
 
 export function Bubble() {
   const [open, setOpen] = useState(false);
   const [formVisible, setFormVisible] = useState(false);
+  const session = useSession();
 
   return (
     <div className="fixed right-4 bottom-4 z-50 rounded-full bg-background">
       <Popover
         open={open}
         onOpenChange={(value) => {
-          // TODO: improve as if you do it quickly, it will still be visible and jump
           if (formVisible && !value) {
             setTimeout(() => setFormVisible(false), 300); // reset form after popover closes
           }
@@ -76,7 +77,15 @@ export function Bubble() {
               </Button>
             </div>
           ) : (
-            <ContactForm onSubmit={() => setOpen(false)} />
+            <ContactForm
+              defaultValues={{
+                name:
+                  session?.data?.user?.name ||
+                  `${session?.data?.user?.firstName} ${session?.data?.user?.lastName}`,
+                email: session?.data?.user?.email ?? undefined,
+              }}
+              onSubmit={() => setOpen(false)}
+            />
           )}
         </PopoverContent>
       </Popover>

diff --git a/apps/web/src/components/support/contact-form.tsx b/apps/web/src/components/support/contact-form.tsx
@@ -61,7 +61,7 @@ export const FormSchema = z.object({
 export type FormValues = z.infer<typeof FormSchema>;
 
 interface ContactFormProps {
-  defaultValues?: FormValues;
+  defaultValues?: Partial<FormValues>;
   onSubmit?: () => void;
 }