feat: add FeedbackPage with custom feedback type selector
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
198
frontend/src/pages/FeedbackPage.tsx
Normal file
198
frontend/src/pages/FeedbackPage.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import { useState } from 'react'
|
||||
import { MessageSquareText, Send, CheckCircle2, ChevronDown } from 'lucide-react'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { feedbackApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
|
||||
// TODO: Post-session contextual feedback prompt — after completing a troubleshooting
|
||||
// session, show a subtle inline prompt like "How was this flow? Quick feedback →"
|
||||
// that opens a lightweight version of this form pre-tagged with tree/session context.
|
||||
|
||||
const FEEDBACK_TYPES = [
|
||||
{ value: 'Bug Report', description: 'Something is broken or not working as expected' },
|
||||
{ value: 'Feature Request', description: "An idea for something new you'd like to see" },
|
||||
{ value: 'Usability Issue', description: 'Something works but is confusing or hard to use' },
|
||||
{ value: 'Documentation', description: 'Feedback on help docs, tooltips, or in-app guidance' },
|
||||
{ value: 'General Feedback', description: 'Anything else — thoughts, impressions, suggestions' },
|
||||
] as const
|
||||
|
||||
export function FeedbackPage() {
|
||||
const user = useAuthStore(s => s.user)
|
||||
|
||||
const [email, setEmail] = useState(user?.email ?? '')
|
||||
const [feedbackType, setFeedbackType] = useState<string>('')
|
||||
const [message, setMessage] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [typeDropdownOpen, setTypeDropdownOpen] = useState(false)
|
||||
|
||||
const canSubmit = email.trim() && feedbackType && message.trim().length >= 10
|
||||
|
||||
const selectedType = FEEDBACK_TYPES.find(t => t.value === feedbackType)
|
||||
|
||||
const handleSelectType = (value: string) => {
|
||||
setFeedbackType(value)
|
||||
setTypeDropdownOpen(false)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!canSubmit || isSubmitting) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const response = await feedbackApi.submit({
|
||||
email: email.trim(),
|
||||
feedback_type: feedbackType,
|
||||
message: message.trim(),
|
||||
})
|
||||
if (response.success) {
|
||||
setSubmitted(true)
|
||||
setFeedbackType('')
|
||||
setMessage('')
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Failed to submit feedback. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNewFeedback = () => {
|
||||
setSubmitted(false)
|
||||
setEmail(user?.email ?? '')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageSquareText className="h-8 w-8 text-muted-foreground" />
|
||||
<h1 className="text-2xl font-bold text-foreground sm:text-3xl">Send Feedback</h1>
|
||||
</div>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Help us improve ResolutionFlow. Report bugs, request features, or share your thoughts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-2xl">
|
||||
{submitted ? (
|
||||
<div className="bg-card border border-border rounded-xl p-8 text-center">
|
||||
<CheckCircle2 className="mx-auto h-12 w-12 text-green-500 mb-4" />
|
||||
<h2 className="text-xl font-semibold text-foreground mb-2">Thank you for your feedback!</h2>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
We've received your submission and will review it shortly. Check your email for a confirmation.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleNewFeedback}
|
||||
className="bg-gradient-brand text-white font-medium px-6 py-2.5 rounded-lg shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Send More Feedback
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="bg-card border border-border rounded-xl p-4 sm:p-6 space-y-5">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="feedback-email" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
id="feedback-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">We'll reply to this address if we need more details.</p>
|
||||
</div>
|
||||
|
||||
{/* Feedback Type — custom selector with descriptions */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Feedback Type
|
||||
</label>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTypeDropdownOpen(!typeDropdownOpen)}
|
||||
className={cn(
|
||||
"w-full rounded-lg border border-border bg-card px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none",
|
||||
feedbackType ? "text-foreground" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<span>{selectedType?.value ?? 'Select a type...'}</span>
|
||||
<ChevronDown size={16} className={cn("transition-transform", typeDropdownOpen && "rotate-180")} />
|
||||
</button>
|
||||
{typeDropdownOpen && (
|
||||
<div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-lg overflow-hidden">
|
||||
{FEEDBACK_TYPES.map(type => (
|
||||
<button
|
||||
key={type.value}
|
||||
type="button"
|
||||
onClick={() => handleSelectType(type.value)}
|
||||
className={cn(
|
||||
"w-full text-left px-3 py-2.5 hover:bg-accent transition-colors",
|
||||
feedbackType === type.value && "bg-accent"
|
||||
)}
|
||||
>
|
||||
<div className="text-sm font-medium text-foreground">{type.value}</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">{type.description}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div>
|
||||
<label htmlFor="feedback-message" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Your Feedback
|
||||
</label>
|
||||
<textarea
|
||||
id="feedback-message"
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
placeholder="Describe your feedback in detail..."
|
||||
required
|
||||
minLength={10}
|
||||
rows={6}
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none resize-y"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{message.trim().length < 10
|
||||
? `Minimum 10 characters (${message.trim().length}/10)`
|
||||
: `${message.trim().length} characters`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit || isSubmitting}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-lg px-6 py-2.5 font-medium text-white shadow-lg shadow-primary/20 transition-opacity",
|
||||
canSubmit && !isSubmitting
|
||||
? "bg-gradient-brand hover:opacity-90"
|
||||
: "bg-gradient-brand opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<Send size={16} />
|
||||
{isSubmitting ? 'Sending...' : 'Submit Feedback'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeedbackPage
|
||||
Reference in New Issue
Block a user