Enhance ContactSupportButton component with additional support categories and optional props for unstyled rendering and project reference

apps/studio/components/ui/ContactSupportButton.tsx

@@ -3,7 +3,6 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import * as Sentry from '@sentry/nextjs'
 import { useRouter } from 'next/router'
 import { MailIcon } from 'lucide-react'
-import { useEffect } from 'react'
 
 // [Jordi] Map so we dont have to import the enum every time we want to pass it to this component
 const SUPPORT_CATEGORY_VALUES = {
@@ -12,22 +11,33 @@ const SUPPORT_CATEGORY_VALUES = {
   DATABASE_UNRESPONSIVE: SupportCategories.DATABASE_UNRESPONSIVE,
   PERFORMANCE_ISSUES: SupportCategories.PERFORMANCE_ISSUES,
   SALES_ENQUIRY: SupportCategories.SALES_ENQUIRY,
+  BILLING: SupportCategories.BILLING,
+  REFUND: SupportCategories.REFUND,
+  ABUSE: SupportCategories.ABUSE,
+  LOGIN_ISSUES: SupportCategories.LOGIN_ISSUES,
+  ACCOUNT_DELETION: SupportCategories.ACCOUNT_DELETION,
 }
 
 type SupportCategory = keyof typeof SUPPORT_CATEGORY_VALUES
 
 export const ContactSupportButton = ({
+  unstyled = false,
   category,
   subject,
   message,
   variant = 'default',
   errorContext,
+  className,
+  projectRef,
 }: {
+  unstyled?: boolean
   category: SupportCategory
   subject: string
   message: string
-  errorContext: Record<string, unknown>
+  errorContext?: Record<string, unknown>
+  projectRef?: string
   variant?: ButtonProps['type']
+  className?: string
 }) => {
   const router = useRouter()
   const currentUrl = router.asPath
@@ -40,15 +50,18 @@ export const ContactSupportButton = ({
     errorContext,
   }
 
-  useEffect(() => {
-    Sentry.addBreadcrumb({
-      category: 'contact-support',
-      message: 'Contact support button rendered',
-      level: 'info',
-      data: sentryData,
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  function getSupportUrl() {
+    const url = new URL('/support/new')
+    url.searchParams.set('category', category)
+    url.searchParams.set('subject', subject)
+    url.searchParams.set('message', encodeURI(message))
+    if (projectRef) {
+      url.searchParams.set('ref', projectRef)
+    }
+    return url.toString()
+  }
+
+  const supportUrl = getSupportUrl()
 
   async function handleClick() {
     Sentry.addBreadcrumb({
@@ -58,13 +71,24 @@ export const ContactSupportButton = ({
       level: 'info',
     })
 
-    const supportUrl = `/support/new?category=${category}&subject=${subject}&message=${encodeURI(message)}`
-
     window.open(supportUrl, '_blank')
   }
 
+  if (unstyled) {
+    return (
+      <a href={supportUrl} target="_blank" rel="noreferrer" className={className}>
+        Contact support
+      </a>
+    )
+  }
+
   return (
-    <Button type={variant} onClick={handleClick} iconRight={<MailIcon className="size-4" />}>
+    <Button
+      type={variant}
+      onClick={handleClick}
+      iconRight={<MailIcon className="size-4" />}
+      className={className}
+    >
       Contact support
     </Button>
   )