feat(support): attach images and PDFs to the in-app contact form
Add optional image and PDF attachments to the existing in-app support contact form, with client-side limits, server-side validation, and email delivery. Preserve the existing subject, rate-limit, analytics, and storage behavior.
This commit is contained in:
Mattsson
@@ -1,9 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRef, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Mail, Loader2, Send } from 'lucide-react'
|
||||
import { FileText, Loader2, Mail, Paperclip, Send, X } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -18,6 +18,15 @@ import { Textarea } from '@/components/ui/textarea'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { submitFeedback } from '@/lib/support/submit-feedback'
|
||||
import { useCompanyOptional } from '@/contexts/CompanyContext'
|
||||
import {
|
||||
SUPPORT_ATTACHMENT_ACCEPT,
|
||||
SUPPORT_MAX_ATTACHMENTS,
|
||||
SUPPORT_MAX_ATTACHMENT_TOTAL_BYTES,
|
||||
SUPPORT_MAX_ATTACHMENT_TOTAL_MB,
|
||||
isSupportedAttachmentType,
|
||||
} from '@/lib/support/attachments'
|
||||
import { shrinkImageForUpload } from '@/lib/documents/shrink-image'
|
||||
import { isShrinkableImage } from '@/lib/documents/upload-size'
|
||||
|
||||
interface SupportLinkProps {
|
||||
variant?: 'inline' | 'muted'
|
||||
@@ -26,6 +35,12 @@ interface SupportLinkProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
type AttachmentError = 'unsupported' | 'too_many' | 'too_large'
|
||||
|
||||
function totalBytes(files: File[]): number {
|
||||
return files.reduce((sum, file) => sum + file.size, 0)
|
||||
}
|
||||
|
||||
export function SupportLink({
|
||||
variant = 'inline',
|
||||
subject,
|
||||
@@ -35,19 +50,91 @@ export function SupportLink({
|
||||
const t = useTranslations('support_link')
|
||||
const [open, setOpen] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const [attachments, setAttachments] = useState<File[]>([])
|
||||
const [isPreparing, setIsPreparing] = useState(false)
|
||||
const [isSending, setIsSending] = useState(false)
|
||||
const [sent, setSent] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const attachmentGenerationRef = useRef(0)
|
||||
const { toast } = useToast()
|
||||
const companyCtx = useCompanyOptional()
|
||||
|
||||
if (companyCtx?.isSandbox) return null
|
||||
|
||||
function showAttachmentError(error: AttachmentError) {
|
||||
if (error === 'unsupported') {
|
||||
toast({ title: t('attach_unsupported'), variant: 'destructive' })
|
||||
return
|
||||
}
|
||||
if (error === 'too_many') {
|
||||
toast({
|
||||
title: t('attach_too_many', { count: SUPPORT_MAX_ATTACHMENTS }),
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
toast({
|
||||
title: t('attach_too_large', { limit: SUPPORT_MAX_ATTACHMENT_TOTAL_MB }),
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
|
||||
async function addFiles(incoming: File[]) {
|
||||
if (!incoming.length || isPreparing || isSending) return
|
||||
|
||||
const generation = attachmentGenerationRef.current
|
||||
setIsPreparing(true)
|
||||
try {
|
||||
const next = [...attachments]
|
||||
let firstError: AttachmentError | null = null
|
||||
|
||||
for (const original of incoming) {
|
||||
if (!isSupportedAttachmentType(original.type)) {
|
||||
firstError ??= 'unsupported'
|
||||
continue
|
||||
}
|
||||
if (next.length >= SUPPORT_MAX_ATTACHMENTS) {
|
||||
firstError ??= 'too_many'
|
||||
break
|
||||
}
|
||||
|
||||
const remaining = SUPPORT_MAX_ATTACHMENT_TOTAL_BYTES - totalBytes(next)
|
||||
const file = original.size > remaining && isShrinkableImage(original.type)
|
||||
? await shrinkImageForUpload(original, remaining)
|
||||
: original
|
||||
|
||||
if (file.size > remaining) {
|
||||
firstError ??= 'too_large'
|
||||
continue
|
||||
}
|
||||
next.push(file)
|
||||
}
|
||||
|
||||
if (generation === attachmentGenerationRef.current) {
|
||||
setAttachments(next)
|
||||
if (firstError) showAttachmentError(firstError)
|
||||
}
|
||||
} finally {
|
||||
setIsPreparing(false)
|
||||
}
|
||||
}
|
||||
|
||||
function resetAttachments() {
|
||||
attachmentGenerationRef.current += 1
|
||||
setAttachments([])
|
||||
if (fileInputRef.current) fileInputRef.current.value = ''
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (message.trim().length < 5) return
|
||||
|
||||
setIsSending(true)
|
||||
const result = await submitFeedback({ subject, message: message.trim() })
|
||||
const result = await submitFeedback({
|
||||
subject,
|
||||
message: message.trim(),
|
||||
files: attachments,
|
||||
})
|
||||
setIsSending(false)
|
||||
|
||||
if (result.ok) {
|
||||
@@ -56,6 +143,7 @@ export function SupportLink({
|
||||
setOpen(false)
|
||||
setSent(false)
|
||||
setMessage('')
|
||||
resetAttachments()
|
||||
}, 2000)
|
||||
} else {
|
||||
toast({
|
||||
@@ -71,6 +159,7 @@ export function SupportLink({
|
||||
if (!next) {
|
||||
setSent(false)
|
||||
setMessage('')
|
||||
resetAttachments()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,18 +219,81 @@ export function SupportLink({
|
||||
<p className="text-xs text-muted-foreground mt-1.5">
|
||||
{t('char_count', { count: message.length })}
|
||||
</p>
|
||||
|
||||
{attachments.length > 0 ? (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{attachments.map((file, index) => (
|
||||
<li
|
||||
key={`${file.name}-${file.size}-${index}`}
|
||||
className="ph-no-capture flex min-w-0 items-center gap-2 rounded-lg border border-border px-3 py-1"
|
||||
>
|
||||
<FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
|
||||
<span className="min-w-0 flex-1 truncate text-xs">
|
||||
{file.name}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setAttachments((current) => current.filter((_, i) => i !== index))}
|
||||
disabled={isSending || isPreparing}
|
||||
aria-label={t('remove_attachment')}
|
||||
className="shrink-0"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
<div className="mt-3 flex flex-col items-start gap-2 sm:flex-row sm:items-center">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept={SUPPORT_ATTACHMENT_ACCEPT}
|
||||
className="hidden"
|
||||
disabled={isSending || isPreparing}
|
||||
onChange={(e) => {
|
||||
void addFiles(Array.from(e.target.files ?? []))
|
||||
e.target.value = ''
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={isSending || isPreparing || attachments.length >= SUPPORT_MAX_ATTACHMENTS}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
{isPreparing ? (
|
||||
<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Paperclip className="mr-2 h-3.5 w-3.5" />
|
||||
)}
|
||||
{t('attach_label')}
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('attach_hint', {
|
||||
count: SUPPORT_MAX_ATTACHMENTS,
|
||||
limit: SUPPORT_MAX_ATTACHMENT_TOTAL_MB,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(false)}
|
||||
onClick={() => handleOpenChange(false)}
|
||||
disabled={isSending}
|
||||
>
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSending || message.trim().length < 5}
|
||||
disabled={isSending || isPreparing || message.trim().length < 5}
|
||||
>
|
||||
{isSending ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user