mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
Ali Waseem
da11ed4cfb
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Support form is a bit cramped when submitted, this is to fix that **Before** <img width="1248" height="580" alt="image" src="https://github.com/user-attachments/assets/dfbf6d1c-6a07-4b1b-b7a6-90bb87c37aaa" /> **After** <img width="697" height="430" alt="image" src="https://github.com/user-attachments/assets/2baeca9f-fee3-4c42-a50b-07d9617cc36e" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined vertical padding in the success confirmation message for improved spacing and visual presentation. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { Check } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Button, IconDiscord } from 'ui'
|
|
|
|
import { NO_PROJECT_MARKER } from './SupportForm.utils'
|
|
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
|
|
import { useProfile } from '@/lib/profile'
|
|
|
|
interface SuccessProps {
|
|
sentCategory?: string
|
|
selectedProject?: string
|
|
onFinish?: () => void
|
|
finishLabel?: string
|
|
showFinishAction?: boolean
|
|
}
|
|
|
|
export const Success = ({
|
|
sentCategory: _sentCategory = '',
|
|
selectedProject = NO_PROJECT_MARKER,
|
|
onFinish,
|
|
finishLabel = 'Finish',
|
|
showFinishAction = true,
|
|
}: SuccessProps) => {
|
|
const { profile } = useProfile()
|
|
const respondToEmail = profile?.primary_email ?? 'your email'
|
|
|
|
const { data: project } = useProjectDetailQuery(
|
|
{ ref: selectedProject },
|
|
{ enabled: selectedProject !== NO_PROJECT_MARKER }
|
|
)
|
|
const projectName = project ? project.name : 'No specific project'
|
|
|
|
const finishAction = showFinishAction ? (
|
|
onFinish ? (
|
|
<Button variant="default" onClick={onFinish}>
|
|
{finishLabel}
|
|
</Button>
|
|
) : (
|
|
<Button asChild variant="default">
|
|
<Link href="/">{finishLabel}</Link>
|
|
</Button>
|
|
)
|
|
) : null
|
|
|
|
return (
|
|
<div className="flex w-full flex-col items-center gap-4 px-4 py-4 text-center">
|
|
<Check strokeWidth={1.5} size={24} className="text-brand" />
|
|
|
|
<div className="flex max-w-[620px] flex-col items-center gap-2">
|
|
<h3 className="text-xl">Support request sent</h3>
|
|
<p className="text-balance text-sm text-foreground-light">
|
|
{selectedProject !== NO_PROJECT_MARKER && (
|
|
<>
|
|
Your ticket has been logged for{' '}
|
|
<span className="font-medium text-foreground">{projectName}</span>.{' '}
|
|
</>
|
|
)}
|
|
We'll reach out at{' '}
|
|
<span className="font-medium text-foreground">{respondToEmail}</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-3">
|
|
{finishAction}
|
|
<Button
|
|
asChild
|
|
variant="default"
|
|
icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
|
|
>
|
|
<Link href="https://discord.supabase.com/" target="_blank">
|
|
Join Discord
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|