diff --git a/studio/components/interfaces/Support/Success.tsx b/studio/components/interfaces/Support/Success.tsx index 2f77cb8fb88..f23ca765446 100644 --- a/studio/components/interfaces/Support/Success.tsx +++ b/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 = ({ sentCategory = 'Best_practices' }) => { + const categoriesToShowAdditionalResources = [ + 'Problem', + 'Unresponsive', + 'Best_practices', + 'Performance', + ] + + const selectedCategory = CATEGORY_OPTIONS.find((option) => option.value === sentCategory) + const [searchValue, setSearchValue] = useState(selectedCategory?.query ?? '') + + return ( +
+
+ +
+ +
+
+
+

Support request successfully sent!

+

+ We will reach out to you using your GitHub email address +

+
+ {categoriesToShowAdditionalResources.includes(sentCategory) && ( + <> +
+ +
+
+

In the meantime, tap into our community

+

+ 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 +

+
+
+ setSearchValue(e.target.value)} + icon={} + actions={[ + + + + + , + ]} + /> +
+ + )} +
+ +
+
+ + + +
+
+ ) -const Success = () => { return (
diff --git a/studio/components/interfaces/Support/Support.constants.ts b/studio/components/interfaces/Support/Support.constants.ts index a5c996c1fe9..4a96c191dd3 100644 --- a/studio/components/interfaces/Support/Support.constants.ts +++ b/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, }, ] diff --git a/studio/components/interfaces/Support/SupportForm.tsx b/studio/components/interfaces/Support/SupportForm.tsx index c1be3161753..45ad8e7ff9b 100644 --- a/studio/components/interfaces/Support/SupportForm.tsx +++ b/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 = ({ setSent }) => { +const SupportForm: FC = ({ setSentCategory }) => { const { ui, app } = useStore() const router = useRouter() const { ref, category } = router.query @@ -127,39 +127,42 @@ const SupportForm: FC = ({ 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 = ({ setSent }) => { )} - {values.category === 'Best-practices' && ( + {values.category === 'Best_practices' && ( <> @@ -370,7 +373,7 @@ const SupportForm: FC = ({ setSent }) => {
- ) : ['Problem', 'Best-practices', 'Performance'].includes(values.category) ? ( + ) : ['Problem', 'Best_practices', 'Performance'].includes(values.category) ? ( { - const [sent, setSent] = useState(false) + const [sentCategory, setSentCategory] = useState() const ongoingIncident = useFlag('ongoingIncident') const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh' @@ -20,12 +21,33 @@ const SupportPage = () => { >
-
- -

Supabase support

+
+
+ +

Supabase support

+
+
-
- {sent ? : } +
+ {sentCategory !== undefined ? ( + + ) : ( + + )}