Update success state of support form submission

studio/components/interfaces/Support/Success.tsx

@@ -1,7 +1,93 @@
 import Link from 'next/link'
-import { Button, IconCheckCircle } from 'ui'
+import { FC, useState } from 'react'
+import {
+  Button,
+  IconCheck,
+  IconCheckCircle,
+  IconExternalLink,
+  IconMail,
+  IconSearch,
+  Input,
+} from 'ui'
+import Divider from 'components/ui/Divider'
+import { CATEGORY_OPTIONS } from './Support.constants'
+
+interface Props {
+  sentCategory?: string
+}
+
+const Success: FC<Props> = ({ sentCategory = 'Best_practices' }) => {
+  const categoriesToShowAdditionalResources = [
+    'Problem',
+    'Unresponsive',
+    'Best_practices',
+    'Performance',
+  ]
+
+  const selectedCategory = CATEGORY_OPTIONS.find((option) => option.value === sentCategory)
+  const [searchValue, setSearchValue] = useState<string>(selectedCategory?.query ?? '')
+
+  return (
+    <div className="mt-10 w-[620px] flex flex-col items-center space-y-4">
+      <div className="relative">
+        <IconMail strokeWidth={1.5} size={60} className="text-brand-900" />
+        <div className="h-6 w-6 rounded-full bg-brand-900 absolute bottom-1 -right-1.5 flex items-center justify-center">
+          <IconCheck strokeWidth={4} size={18} />
+        </div>
+      </div>
+      <div className="flex items-center flex-col space-y-2">
+        <h3 className="text-xl">Support request successfully sent!</h3>
+        <p className="text-sm text-scale-1100">
+          We will reach out to you using your GitHub email address
+        </p>
+      </div>
+      {categoriesToShowAdditionalResources.includes(sentCategory) && (
+        <>
+          <div className="!my-10 w-full">
+            <Divider light />
+          </div>
+          <div className="flex flex-col items-center px-12 space-y-2">
+            <p>In the meantime, tap into our community</p>
+            <p className="text-sm text-scale-1000 text-center">
+              Find the answers you need with fellow developers building with Supabase by joining our
+              GitHub discussions or on Discord - build the next best thing together
+            </p>
+          </div>
+          <div className="w-full px-12 !mt-8">
+            <Input
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              icon={<IconSearch size={16} strokeWidth={1.5} />}
+              actions={[
+                <Link
+                  href={`https://github.com/supabase/supabase/discussions?discussions_q=${searchValue}`}
+                >
+                  <a target="_blank">
+                    <Button
+                      className="mr-1"
+                      type="default"
+                      icon={<IconExternalLink size={16} strokeWidth={1.5} />}
+                    >
+                      Search on Github discussions
+                    </Button>
+                  </a>
+                </Link>,
+              ]}
+            />
+          </div>
+        </>
+      )}
+      <div className="!mt-10 w-full">
+        <Divider light />
+      </div>
+      <div className="w-full pb-4 px-4 flex items-center justify-end">
+        <Link href="/">
+          <Button>Go back to dashboard</Button>
+        </Link>
+      </div>
+    </div>
+  )
 
-const Success = () => {
   return (
     <div className="relative my-10 mx-32 space-y-4">
       <div className="absolute -left-14 -top-2.5">

studio/components/interfaces/Support/Support.constants.ts

@@ -3,41 +3,49 @@ export const CATEGORY_OPTIONS = [
     value: 'Problem',
     label: 'Issues with APIs / client libraries',
     description: "Issues with your project's API and client libraries",
+    query: undefined,
   },
   {
-    value: 'Unresponseive',
+    value: 'Unresponsive',
     label: 'Database unresponsive',
     description: 'Issues with connecting to your database',
+    query: 'Unable to connect',
+  },
+  {
+    value: 'Best_practices',
+    label: 'Questions on best practices',
+    description: 'Enquire on how best practices developing with Supabase',
+    query: 'Best practices',
   },
   {
     value: 'Performance',
     label: 'Performance issues',
     description: 'Reporting of performance issues is only available on the Pro tier',
-  },
-  {
-    value: 'Best-practices',
-    label: 'Questions on best practices',
-    description: 'Enquire on how best practices developing with Supabase',
+    query: 'Performance',
   },
   {
     value: 'Sales',
     label: 'Sales enquiry',
     description: 'Questions about pricing, paid plans and Enterprise plans',
+    query: undefined,
   },
   {
     value: 'Billing',
     label: 'Billing',
     description: 'Issues with credit card charges | invoices | overcharing',
+    query: undefined,
   },
   {
     value: 'Abuse',
     label: 'Abuse report',
     description: 'Report abuse of a Supabase project or Supabase brand',
+    query: undefined,
   },
   {
     value: 'Refund',
     label: 'Refund enquiry',
     description: 'Formal enquiry form for requesting refunds',
+    query: undefined,
   },
 ]
 

studio/components/interfaces/Support/SupportForm.tsx

@@ -21,17 +21,17 @@ const MAX_ATTACHMENTS = 5
 
 // [Joshen] Note to self - need to double check that this will work with the actual ticket submission to Hubspot too
 // Remaining
-// - Github issues link for problems
-// - Github discussions/discord link for best practices
+// - [x] Github issues link for problems
+// - [x] Github discussions/discord link for best practices
+// - Improve success state of submission
+// - Integrate with API and Hubspot
 // Do a screen grab, get approval from Ant/Jonny
-// Integrate with API
-// Improve success state of submission
 
 interface Props {
-  setSent: (value: boolean) => void
+  setSentCategory: (value: string) => void
 }
 
-const SupportForm: FC<Props> = ({ setSent }) => {
+const SupportForm: FC<Props> = ({ setSentCategory }) => {
   const { ui, app } = useStore()
   const router = useRouter()
   const { ref, category } = router.query
@@ -127,39 +127,42 @@ const SupportForm: FC<Props> = ({ setSent }) => {
   }
 
   const onSubmit = async (values: any, { setSubmitting }: any) => {
-    setSubmitting(true)
-    const attachments = uploadedFiles
-      ? await uploadAttachments(values.projectRef, uploadedFiles)
-      : []
-    const payload = {
-      ...values,
-      message: formatMessage(values.body, attachments),
-      verified: true,
-      tags: ['dashboard-support-form'],
-      siteUrl: '',
-      additionalRedirectUrls: '',
-    }
+    setSentCategory(values.category)
+    return
 
-    if (values.projectRef !== 'no-project') {
-      const URL = `${API_URL}/auth/${values.projectRef}/config`
-      const authConfig = await get(URL)
-      if (!authConfig.error) {
-        payload.siteUrl = authConfig.SITE_URL
-        payload.additionalRedirectUrls = authConfig.URI_ALLOW_LIST
-      }
-    }
+    // setSubmitting(true)
+    // const attachments = uploadedFiles
+    //   ? await uploadAttachments(values.projectRef, uploadedFiles)
+    //   : []
+    // const payload = {
+    //   ...values,
+    //   message: formatMessage(values.body, attachments),
+    //   verified: true,
+    //   tags: ['dashboard-support-form'],
+    //   siteUrl: '',
+    //   additionalRedirectUrls: '',
+    // }
 
-    const response = await post(`${API_URL}/feedback/send`, payload)
-    if (response.error) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to submit support ticket: ${response.error.message}`,
-      })
-    } else {
-      ui.setNotification({ category: 'success', message: 'Support request sent. Thank you!' })
-      setSent(true)
-    }
-    setSubmitting(false)
+    // if (values.projectRef !== 'no-project') {
+    //   const URL = `${API_URL}/auth/${values.projectRef}/config`
+    //   const authConfig = await get(URL)
+    //   if (!authConfig.error) {
+    //     payload.siteUrl = authConfig.SITE_URL
+    //     payload.additionalRedirectUrls = authConfig.URI_ALLOW_LIST
+    //   }
+    // }
+
+    // const response = await post(`${API_URL}/feedback/send`, payload)
+    // if (response.error) {
+    //   ui.setNotification({
+    //     category: 'error',
+    //     message: `Failed to submit support ticket: ${response.error.message}`,
+    //   })
+    // } else {
+    //   ui.setNotification({ category: 'success', message: 'Support request sent. Thank you!' })
+    //   setSentCategory(values.category)
+    // }
+    // setSubmitting(false)
   }
 
   return (
@@ -266,7 +269,7 @@ const SupportForm: FC<Props> = ({ setSent }) => {
               </>
             )}
 
-            {values.category === 'Best-practices' && (
+            {values.category === 'Best_practices' && (
               <>
                 <BestPracticesGuidance />
                 <Divider light />
@@ -370,7 +373,7 @@ const SupportForm: FC<Props> = ({ setSent }) => {
                   </div>
                 </div>
               </>
-            ) : ['Problem', 'Best-practices', 'Performance'].includes(values.category) ? (
+            ) : ['Problem', 'Best_practices', 'Performance'].includes(values.category) ? (
               <DisabledStateForFreeTier
                 category={selectedCategory?.label ?? ''}
                 projectRef={values.projectRef}

studio/pages/support/new.tsx

@@ -1,14 +1,15 @@
 import SVG from 'react-inlinesvg'
+import Link from 'next/link'
 import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconArrowLeft } from 'ui'
+import { Button, IconActivity } from 'ui'
 
 import { withAuth, useFlag } from 'hooks'
 import Success from 'components/interfaces/Support/Success'
 import SupportForm from 'components/interfaces/Support/SupportForm'
 
 const SupportPage = () => {
-  const [sent, setSent] = useState<boolean>(false)
+  const [sentCategory, setSentCategory] = useState<string>()
 
   const ongoingIncident = useFlag('ongoingIncident')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
@@ -20,12 +21,33 @@ const SupportPage = () => {
     >
       <div className="mx-auto my-8 max-w-2xl px-4 lg:px-6">
         <div className="space-y-12 py-8">
-          <div className="flex items-center space-x-3">
-            <SVG src={`/img/supabase-logo.svg`} className="h-4 w-4" />
-            <h4 className="m-0 text-lg">Supabase support</h4>
+          <div className="flex justify-between items-center">
+            <div className="flex items-center space-x-3">
+              <SVG src={`/img/supabase-logo.svg`} className="h-4 w-4" />
+              <h4 className="m-0 text-lg">Supabase support</h4>
+            </div>
+            <div className="flex items-center space-x-3">
+              <Link href="https://status.supabase.com/">
+                <a target="_blank">
+                  <Button type="default" icon={<IconActivity />}>
+                    Supabase Status
+                  </Button>
+                </a>
+              </Link>
+            </div>
           </div>
-          <div className="min-w-full space-y-12 rounded border bg-panel-body-light py-8 shadow-md dark:border-dark dark:bg-panel-body-dark">
-            {sent ? <Success /> : <SupportForm setSent={setSent} />}
+          <div
+            className={[
+              'min-w-full space-y-12 rounded border bg-panel-body-light shadow-md',
+              `${sentCategory === undefined ? 'py-8' : 'pt-8'}`,
+              'dark:border-dark dark:bg-panel-body-dark',
+            ].join(' ')}
+          >
+            {sentCategory !== undefined ? (
+              <Success sentCategory={sentCategory} />
+            ) : (
+              <SupportForm setSentCategory={setSentCategory} />
+            )}
           </div>
         </div>
       </div>