Files
supabase/apps/studio/data/feedback/support-ticket-send.ts
CharisandJoshen Lim f5ff10e195 refactor,tests(support form) (#39410)
* refactor: refactor support form

Refactor support form to make it easier to maintain:
- Split up large components into smaller components and hooks
- Lift state up so we don't have to do complex child/parent
state-syncing via useEffect
- Use nuqs parsing for consistent serialization/deserialization of
support form prefilled fields

* test: support form

Add comprehensive tests for support form

* fix(support form): project and org empty state

* Nit clean up

* More clean up

* cleannnn

* fix(support form): allow case-insensitive category in url

* clean(support form tests): remove unused param

* fix(support form): incorrect logic for sending affected services in payload

* clean(support form): use NO_ORG_MARKER and NO_PROJECT_MARKER instead of strings

* fix(support form): don't show upgrade cta if already on enterprise

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-14 11:04:33 +08:00

100 lines
2.4 KiB
TypeScript

import { type UseMutationOptions, useMutation } from '@tanstack/react-query'
import { toast } from 'sonner'
// End of third-party imports
import type { ExtendedSupportCategories } from 'components/interfaces/Support/Support.constants'
import { handleError, post } from 'data/fetchers'
import type { ResponseError } from 'types'
export type sendSupportTicketVariables = {
subject: string
message: string
category: ExtendedSupportCategories
severity: string
projectRef?: string
organizationSlug?: string
library?: string
affectedServices?: string
browserInformation?: string
allowSupportAccess: boolean
siteUrl?: string
additionalRedirectUrls?: string
dashboardSentryIssueId?: string
}
export async function sendSupportTicket({
subject,
message,
category,
severity,
projectRef,
organizationSlug,
library,
affectedServices,
browserInformation,
allowSupportAccess,
siteUrl,
additionalRedirectUrls,
dashboardSentryIssueId,
}: sendSupportTicketVariables) {
const { data, error } = await post('/platform/feedback/send', {
body: {
subject,
message,
category,
severity,
projectRef,
organizationSlug,
library,
verified: true,
tags: ['dashboard-support-form'],
siteUrl,
additionalRedirectUrls,
affectedServices,
browserInformation,
allowSupportAccess,
dashboardSentryIssueId,
},
})
if (error) {
handleError(error, {
alwaysCapture: true,
sentryContext: {
tags: {
dashboardSupportForm: true,
},
},
})
}
return data
}
type sendSupportTicketData = Awaited<ReturnType<typeof sendSupportTicket>>
export const useSendSupportTicketMutation = ({
onSuccess,
onError,
...options
}: Omit<
UseMutationOptions<sendSupportTicketData, ResponseError, sendSupportTicketVariables>,
'mutationFn'
> = {}) => {
return useMutation<sendSupportTicketData, ResponseError, sendSupportTicketVariables>(
(vars) => sendSupportTicket(vars),
{
async onSuccess(data, variables, context) {
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
if (onError === undefined) {
toast.error(`Failed to submit support ticket: ${data.message}`)
} else {
onError(data, variables, context)
}
},
...options,
}
)
}